Обводка тела страницы
Обводка тела страницы - весьма изысканный и изящный эффект для оформления страниц.
Характеристики "обводки страницы":
- Она проходит по всему окну браузера, прилипая к границам вне зависимости от размера экрана.
- Все грани остаются на своих местах при прокрутке страницы.
- Содержание проходит под обводкой при прокрутке страницы.
Метод №1. 4 элемента div
.
Данный метод имеет наилучшую совместимость с браузерами. Для его реализации мы используем 4 элемента div
.
<div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div>
Затем устанавливаем правила CSS. Некоторые свойства общие для всех элементов, некоторые - для пар верх/низ, право/лево, и есть уникальные для каждого элемента свойства. Код не содержит избыточных повторяющихся свойств.
top, #bottom, #left, #right { background: #a5ebff; position: fixed; } #left, #right { top: 0; bottom: 0; width: 15px; } #left { left: 0; } #right { right: 0; } #top, #bottom { left: 0; right: 0; height: 15px; } #top { top: 0; } #bottom { bottom: 0; }
Все должно работать в IE 7 и во всех остальных нормальных браузерах. Поддержка для IE 6, который не поддерживает фиксированного позиционирования, заключается в условном комментарии в разделе head
, который отключает обводку. Никаких угрызений совести и сожалений по данному поводу нет.
<!--[if lte IE 6]> <style>#top, #bottom, #left, #right { display: none; }</style> <![endif]-->
Также надо отгородиться от маленьких экранов (например, экранов мобильных устройств), которые не поддерживают фиксированное позиционирование:
@media /* Маленькие экраны, включая iPhone */ only screen and (max-width: 500px), /* iPad */ only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #top, #bottom, #left, #right { display: none; } }
Метод № 2. Псевдо элементы.
В вышеприведенном примере, нам нужно 4 уникальных элемента, чтобы добиться нужного эффекта. Но это четыре дополнительных элемента, которые встраиваются в семантику документа. В идеале таких элементов должно быть 0. Ну что ж, у нас есть два элемента, которые уже имеют размер равный размеру окна браузера - это <html>
и <body>
. Используем псевдо элементы :before
и :after
для них и получим нужные четыре!
Можно использовать те же свойства и значения, как и в методе №1, только с небольшими изменениями:
html:before, html:after, body:before, body:after { content: ""; position: fixed; background: #a5ebff; /* и так далее... */ }
Хотя поддержка псевдо-элементов достаточно хороша, данный метод несколько хуже метода №1. Большой проблемой является ошибка браузеров WebKit, которая приводит к растеканию фона псевдо-элемента по всему экрану. Такие проблемы делают использование псевдо элементов преждевременным.
Но есть решение. И при этом удовлетворяющее требованиям семантичности!
В действительности нам не нужно четыре уникальных элемента, нужно только два. Верх и низ должны быть уникальны, поэтому они могут иметь фиксированное положение и не прокручиваться. А для правой и левой стороны обводки можно использовать border
для элемента <body>
.
body:before, body:after { content: ""; position: fixed; background: #900; left: 0; right: 0; height: 10px; } body:before { top: 0; } body:after { bottom: 0; } body { border-left: 10px solid #900; border-right: 10px solid #900; }
Тот же эффект. Правда, с более слабой поддержкой, но зато весьма семантический.
Для примера: kottke.org
Сайт Jason Kottke Kottke.org имеет отличную обводку:
Jason использует восемь разных элементов и восемь (!) разных изображений для реализации эффекта. Так как данная рамка не фиксируется по экрану (фиксация осуществляется по верху и низу содержания), то ее легко реализовать с помощью CSS3.
Будем использовать box-shadow
для элемента <body>
с множественными тенями:
body { padding: 40px; overflow-x: hidden; /* Для Opera */ -webkit-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px; -moz-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px; box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px; }
Некоторые проблемы: Opera (Mac, 11.10) неправильно выполняет команды, расширяя размер элемента, чтобы он соответствовал тени снаружи (даже если тень установлена как внутренняя). В результате появляется ненужная полоска прокрутки, так как используется элемент body
на всю ширину. Горизонтальная полоска прокрутки скрывается с помощью свойства overflow-x
. Но, к сожалению, снизу остается небольшое пространство.
Решение работает в браузерах: IE 9+, Firefox 3.5+, Opera 10.5+, Chrome, Safari 3+
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/sW94iD5zBSw/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
Дураки ставят вопросы чаще, чем пытливые люди Горький Максим - (1868-1936) - русский писатель, литературный критик и публицист, общественный деятель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp