Множественные фоны и обводка с использованием CSS2
Использование псевдо-элементов CSS 2.1 дает возможность задействовать 3 уровня для фона, 2 изображения с фиксированными размерами и множественные сложные обводки для одного элемента HTML. Данный метод существенно расширяет возможности оформления веб страниц для всех браузеров, которые поддерживают псевдо-элементы CSS 2.1 с позиционированием. Поддержка CSS3 не требуется.
Принцип работы
По существу, создание псевдо-элементов CSS ( :before и :after ) и работа с ними похожа на то, как организуется работа с вложенными элементами HTML внутри целевого элемента. Но с одним существенным преимуществом — все производится вне семантики, без использования вложенных элементов HTML.
Для организации множественных фонов и/или обводок псевдо-элементы сдвигаются за контент и прикрепляются в нужной точке элемента HTML с помощью абсолютного позиционирования.
Псевдо-элемент не содержит реального контента и позиционируется абсолютно. Таким образом, он может быть растянут над любой областью «родительского» элемента без влияния на контент. Для этого можно использовать комбинацию свойств top , right , bottom , left , width и height .
Какие эффекты можно получить?
Используя только один элемент можно получить параллакс, множественные фоны (как цвета, так и изображения), обрезанные фоновые изображения, замещение изображений, расширяемые элементы с изображениями в качестве обводки, гибкие искусственные колонки, изображения, выступающие за границы элемента, множественные обводки и другие популярные эффекты, для которых обычно используются теги изображения и/или дополнительная разметка HTML.
На демонстрационных страницах можно увидеть воплощение нескольких популярных эффектов оформления веб страниц с помощью данной техники.
В дополнение, можно использовать изменение стилей для :hover, чтобы получить более сложные эффекты.
Пример кода: множественные изображения для фона
С помощью данной техники можно воспроизвести эффект параллакса с множественными изображениями для фона (такой используется на сайте Silverback), задействовав при этом только один HTML элемент.
Элемент получает свой собственный фон и нужные отступы. Относительное позиционирование элемента действует как точка отсчета при абсолютном позиционировании псевдо-элементов. Положительное значение z-index позволяет корректировать положение псевдо-элементов по оси z.
#silverback
Оба псевдо-элемента позиционируются абсолютно и размещаются по сторонам элемента. Значение z-index равное -1 размещает псевдо-элемент позади слоя контента. Таким образом, псевдо-элементы располагаются поверх фона элемента и его обводки, но весь контент остается доступным для выделения и воспринимает нажатия кнопки мыши.
#silverback:before, #silverback:after
Каждый псевдо-элемент имеет повторяющийся набор фоновых изображений. Для воспроизведения эффекта параллакса больше ничего не нужно.
Свойство content позволяет добавлять изображение как генерированный контент. Имея два псевдо элемента можно добавить 2 дополнительных изображения к элементу. Они могут быть грубо позиционированы в псевдо-элементах с помощью других свойств, таких как text-align и padding .
#silverback:before < content:url(gorilla-1.png); padding-left:3%; text-align:left; background:transparent url(vines-mid.png) 300% 0 repeat-x; >#silverback:after
Пример кода: гибкие искусственные колонки
Другим применением описываемой техники является создание гибких колонок равной высоты без использования изображений или дополнительных связанных элементов.
Разметка HTML очень проста. Используем классы для каждого элемента div вместо селекторов CSS 2.1, которые не поддерживаются IE6. Если нет необходимости поддерживать IE6, то можно использовать селекторы.
[контент][контент][контент]
Контейнер имеет ширину, заданную в процентах, относительное позиционирование и положительное значение свойства z-index . Использование overflow:hidden позволяет элементу переносить на другую строку контент своих плавающих потомков и скрывает выступающие псевдо-элементы. Цвет фона обеспечивает цвет для одной из колонок.
#faux
Использование относительного позиционирования для элементов-потомков div , позволяет управлять порядком колонок независимо от их следования в исходной разметке.
#faux div < position:relative; float:left; width:30%; >#faux .main #faux .supp1 #faux .supp2
Две другие колонки создаются с помощью псевдо-элементов с фонами. В качестве фонов можно использовать изображения, если нужно.
#faux:before, #faux:after < content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:33.333%; background:#f9b6ff; >#faux:after
Пример кода: множественная обводка
Множественная обводка организуется почти таким же способом. Ее использование позволяет отказаться от изображений при сохранении эффекта.
Элемент должен иметь относительное позиционирование и достаточной ширины отступ, чтобы содержать дополнительную обводку, которая будет создаваться псевдо-элементами.
#borders
Псевдо-элемент позиционируется на соответствующей дистанции от границы элемента, помещается под слой контента с помощью отрицательного значения свойства z-index , и ему назначаются обводка и фон такие, какие нужно.
#borders:before < content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929; >#borders:after
Прогрессивные усовершенствованиям и устаревшие браузеры
IE6 и IE7не поддерживают псевдо-элементы CSS 2.1 и игнорируют все объявления :before и :after . Они не будут выводить все усовершенствования, но сохранят основу функционирования.
Внимание при использовании Firefox 3.0
Firefox 3.0 поддерживает псевдо-элементы CSS 2.1, но не поддерживает их позиционирование. Из-за такой частичной поддержки эффекты, которые явно зависят от свойств псевдо-элементов width или height, могут выглядеть ужасно. Нет никакого альтернативного способа для Firefox 3.0, если вы использовали свойства width или height . Иногда некоторые улучшения можно получить при добавлении display:block к стилям псевдо-элемента.
Прежде, чем использовать техники, которые требуют позиционирования псевдо-элементов с помощью свойств width или height, нужно рассмотреть, насколько важно обеспечивать поддержку Firefox 3.0, и процент ваших пользователей, которые используют данный браузер.
Данная проблема полностью решается в приложениях, которые используют абсолютное позиционирование, вместо свойств width или height.
Усовершенствования с помощью CSS3
Все примеры, которые реализованы в данной статье, могут быть улучшены с использованием CSS3.
Использование свойств border-radius , rgba , transforms и множественные фоны CSS3 в сочетании с псевдо-элементами могут открыть возможности для реализации более сложных эффектов. Однако, на текущий момент нет браузеров, которые поддерживают анимации или трансформации CSS3 для псевдо-элементов.
Будущее: псевдо-элементы CSS3
Предполагаемые усовершенствования псевдо-элементов в CSS3 (смотри документ CSS3 Generated and Replaced Content Module) включают связанные псевдо-элементы ( ::before::before ), множественные псевдо-элементы ( ::after(2) ), оборачивающие псевдо-элементы ( ::outside ) и возможность вставлять псевдо-элементы для подгружаемых частей документа ( ::alternate ).
Такие изменения откроют практически неограниченные возможности для создания всех видов эффектов с помощью всего лишь одного элемента и набора псевдо-элементов.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Перевел: Сергей Фастунов
Урок создан: 1 Февраля 2011
Просмотров: 36242
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
CSS Magic #3. Обводка для текста (text-stroke effect)
Привет! Обводка для текста делается довольно легко, однако прежде чем начнем — стоит понимать, что данный метод не сработает в IE. Если Вам не особо нужен IE — либо игнорим проблему, либо выкручиваемся (я покажу как это можно сделать). Поехали!
HTML
div class="no-ie">Text with stroke.div>
div class="ie">Text with stroke.div>Самая обыкновенная разметка. Даже и останавливаться на ней неохота, разве что тут два текста, один будет под IE, другой — под все остальное.
CSS
.no-ie
font-size: 4em;
-webkit-text-stroke: 1px darkgrey;
-webkit-text-fill-color: transparent;
margin-bottom: 2em;
>
.ie
font-size: 4em;
color: #fff;
text-shadow:
-0 -1px 0 #000000,
0 -1px 0 #000000,
-0 1px 0 #000000,
0 1px 0 #000000,
-1px -0 0 #000000,
1px -0 0 #000000,
-1px 0 0 #000000,
1px 0 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
>Используем два -webkit-свойства -webkit-text-stroke и -webkit-text-fill-color для достижения нужного результата. Текст будет прозрачным и будет иметь красивую, нужную нам, обводку. Под IE идем другим путем — придется задать цвет тексту и text-shadow . Конкретно такой код может не сработать, поэтому вот вам генератор тени для текста.
Определять браузер можно любым доступным способом (благо их полно в интернете), но если нужно — я расскажу в отдельной статье как)
И по традиции пен:
Вот собственно и все. Простой, но полезный эффект. К сожалению, не лишенный недостатков, но ничего в мире не бывает идеально.
Как сделать обводку div в css
Нравится ресурс?
Модераторы: Vasya2000, Serafim, fatalist
‘> Как сделать объёмную рамку у DIV?
- Подписаться на тему
- Сообщить другу
- Скачать/распечатать тему
Сообщ. #1 , 27.10.11, 15:57
Full Member
Мне для DIV-а нужно сделать следующую рамку: обводка линией толщиной в 1 пиксель тёмного цвета и под ней обводка линией толщиной 1 пиксель светлого цвета. Как это делается?
Сообщ. #2 , 27.10.11, 16:08
Full Member
Рейтинг (т): 18
Вставь этот DIV в еще один DIV, в котором укажи:
style=»border: solid 1px цвет; padding:0px;»
Сообщ. #3 , 27.10.11, 19:01
Рейтинг (т): 683
http://htmlbook.ru/css/border-style
Сообщ. #4 , 28.10.11, 20:17
Full Member
Спасибо! У меня ещё один вопрос про рамку. Я задаю прозрачность фона DIV-а следующим образом:
.itemContainerClass<
position: absolute;
border: solid 1px RGB(70,70,70);
background: RGB(178,100,51);
background: RGBA(178,100,51,0.12);
filter: alpha(opacity=12);
margin: 0px;
padding: 0px;
display: block;
overflow: hidden;
font-family: Tahoma;
font-size: 18px;
filter и background: RGB(. ) — для IE.
filter: RGBA(. ) — для остальных браузеров.
Так вот, во всех браузерах, кроме IE 8, прозрачность не затрагивает рамку, а в IE 8 и рамка становится прозрачной.
Можно ли сделать прозрачность DIV-а в IE 8 так, чтобы рамка не затрагивалась?
Сообщ. #5 , 29.10.11, 02:05