в силу его удобства и универсальности, чтобы выделить его среди остальных элементов, к нему добавляется класс block (пример 1).

Пример 1. Два фоновых изображения

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Использование псевдо-элементов 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 { position:relative; z-index:1; min-width:200px; min-height:200px; padding:120px 200px 50px; background:#d3ff99 url(vines-back.png) -10% 0 repeat-x; }

Оба псевдо-элемента позиционируются абсолютно и размещаются по сторонам элемента. Значение z-index равное -1 размещает псевдо-элемент позади слоя контента . Таким образом, псевдо-элементы располагаются поверх фона элемента и его обводки, но весь контент остается доступным для выделения и воспринимает нажатия кнопки мыши.

#silverback:before, #silverback:after { position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; padding-top:100px; }

Каждый псевдо-элемент имеет повторяющийся набор фоновых изображений. Для воспроизведения эффекта параллакса больше ничего не нужно.

Свойство 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 { content:url(gorilla-2.png); padding-right:3%; text-align:right; background:transparent url(vines-front.png) 70% 0 repeat-x; }

Пример кода: гибкие искусственные колонки

Другим применением описываемой техники является создание гибких колонок равной высоты без использования изображений или дополнительных связанных элементов.

Разметка HTML очень проста. Используем классы для каждого элемента div вместо селекторов CSS 2.1, которые не поддерживаются IE6. Если нет необходимости поддерживать IE6, то можно использовать селекторы.

Контейнер имеет ширину, заданную в процентах, относительное позиционирование и положительное значение свойства z-index . Использование overflow:hidden позволяет элементу переносить на другую строку контент своих плавающих потомков и скрывает выступающие псевдо-элементы. Цвет фона обеспечивает цвет для одной из колонок.

#faux { position:relative; z-index:1; width:80%; margin:0 auto; overflow:hidden; background:#ffaf00; }

Использование относительного позиционирования для элементов-потомков div , позволяет управлять порядком колонок независимо от их следования в исходной разметке.

#faux div { position:relative; float:left; width:30%; } #faux .main {left:35%} #faux .supp1 {left:-28.5%} #faux .supp2 {left:8.5%}

Две другие колонки создаются с помощью псевдо-элементов с фонами. В качестве фонов можно использовать изображения, если нужно.

#faux:before, #faux:after { content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:33.333%; background:#f9b6ff; } #faux:after { left:66.667%; background:#79daff; }

Пример кода: множественная обводка

Множественная обводка организуется почти таким же способом. Ее использование позволяет отказаться от изображений при сохранении эффекта.

Элемент должен иметь относительное позиционирование и достаточной ширины отступ, чтобы содержать дополнительную обводку, которая будет создаваться псевдо-элементами.

#borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600; }

Псевдо-элемент позиционируется на соответствующей дистанции от границы элемента, помещается под слой контента с помощью отрицательного значения свойства 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 { content:""; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid #00b4ff; background:#fff; }

Прогрессивные усовершенствованиям и устаревшие браузеры

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).

Такие изменения откроют практически неограниченные возможности для создания всех видов эффектов с помощью всего лишь одного элемента и набора псевдо-элементов.

Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.

Каждый верстальщик знает, что самый простой способ создания дизайна - лучшее, что может быть. Одним из простых и удобных техник является , с помощью нескольких строк css кода.

Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя .

В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе. Вот, как это смотрится в реалии:

CSS код для multiple backgrounds

Несколько background картинок реализуются с помощью нескольких значений css параметра background, которые разделены комой:

#multipleBGs { background: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 0 0, 30px 70px, right top; width: 400px; height: 400px; border: 1px solid #ccc; }

Я пытался сделать так же, с помощью краткого кода. К сожалению, не работает.

Плюс к этому, можно использовать другие свойства background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так же, как и в CSS градиентах.

Вот и все! Надеюсь вам понравилась эта техника создания нескольких background, без использования каких либо вспомогательных элементов. Чистый семантический код.

Если у вас остались вопросы, замечания или предложения по поводу данной техники создания multiple backgrounds - пишите в комментарии. Также, хотелось бы провести тест на

Задача

Кроссбраузерно добавить два фоновых изображения для блока.

Решение

Фоновые картинки достаточно активно используются для создания блоков, поскольку с их помощью формируется самый причудливый дизайн. В частности, можно добавлять к элементу декоративные уголки, вертикальные и горизонтальные линии, а также многое другое.

Кроссбраузерно (т.е. для всех браузеров, включая старые версии) нельзя добавить два фона к одному элементу, поэтому приходится идти на хитрость и вкладывать один элемент внутрь другого. При этом для каждого вложенного элемента создаётся своя фоновая картинка, за счёт наложения блоков и рождается эффект, что элемент один, и он содержит несколько фоновых изображений. Здесь важно не добавлять отступы к внешним элементам, иначе эффект будет потерян.

Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показано фоновая картика, которая будет применяться для первого элемента, она будет формировать границу слева, а на рис. 2 фон для вложенного элемента, который добавляет границу справа.

Рис. 1. Фоновая картинка для границы слева

Рис. 2. Фоновая картинка для границы справа

В качестве блочного элемента к которому добавляется фон, обычно используется тег