background:transparent url(vines-front.png) 70% 0 repeat-x;
background:transparent url(vines-mid.png) 300% 0 repeat-x;
Свойства контента позволяет вам добавлять изображения как сформированный контент. С двумя под-компонентами вы можете добавить два дополнительных изображения. Они могут быть просто размещены внутри блока под-элементов, варьируя содержимым, таким как текст и дополнение.
Каждый под-компонент теперь имеет повторяющееся фоновое изображение. Это все, что надо было сделать для создания эффекта искусственного замещения.
Оба под-компонента точно расположены и прикреплены к обеим сторонам компонента. Значение z-координат, равное −1 передвигает под-компоненты за уровень контента. Таким образом под-компоненты располагаются над компонентом фона и рамки, но контент остается видимым, сохраняя возможность перехода по ссылкам.
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
Компонент имеет свое собственное фоновое изображение и любое желаемое дополнение. Соответственно расположенный элемент функционирует как опорная точка при точно расположенном под-элементе. Положительное значение z-координат позволит соответственно разместить z-ось под-элементов.
Используя данный метод возможно воссоздать искусственные эффекты многообразных фонов, наподобие эффектов, имеющихся на сайте , где используется только один компонент HTML.
Пример кода: множественные изображения для фона
Большинство структурных компонентов содержат и под-компоненты. Поэтому обычно имеется возможность последующего дополнения следующих двух под-компонентов, разместив их под первыми (предыдущими) под-компонентами. В дополнение, вы можете использовать измененный дизайн (:hover) для получения сложных взаимо-заменяющихся эффектов.
На примерах сайтов Множественные фоны с CSS 2.1 и Множественные рамки с CSS 2.1 можно увидеть как достигаются подобные эффекты с помощью данного способа.
Используя только один компонент вы можете добиться следующих эффектов — смещения фона; разнообразия цветовых комбинаций и изображений фона; встроенные изображения фона; замена изображений; расширяющиеся блоки, использующие изображения для рамок; всплывающие колонки; наличие изображений вне блока; появление нескольких рамок, а также самого популярного эффекта, для которого обычно необходимы изображения и/или использование презентационного HTML. Возможно добавление двух дополнительных презентационных изображений в качестве произведенного контента.
Каких эффектов можно достигнуть?
Псевдо-компоненты не содержат настоящего контента и расположены в заданном компоненте с большой точностью. Это означает, что их можно расположить в любом месте соответствующего компонента без какого-либо влияния на контент. Расположение псевдо-компонентов может варьироваться на ваше усмотрение и производиться в любой комбинации значений верх-право-низ-лево, а также любого размера по высоте и ширине.
Множественные блоки позволяют создавать из одного HTML компонента множество рамок и фонов.
Для достижения определенного количества фонов и/или рамок, псевдо-компоненты устанавливаются под контентом и размещаются в соответствующих положениях компонента HTML с точностью.
В принципе, вы создаете псевдо-компоненты, используя CSS (:до и :после), и работаете с ними так же, как и с компонентами HTML, расположенными в заданном вами компоненте. Однако они имеют отличительные положительные стороны говоря без лишних слов по сравнению с использованием компонентов HTML.
Совместимо с: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
В продолжение этой хотелось бы поговорить о множественных фонах.Используя псевдо-компоненты CSS 2.1 можно обеспечить до трех разных фоновых основ, двух представляемых изображений с зафиксированными размерами и множество различных рамок для одного HTML компонента. Данный метод прогрессивного расширения совместим со всеми браузерами, псевдо-компоненты CSS 2.1 и их расположение. Поддержки CSS3 не требуется.
Множественные Рамки и Фон с CSS 2.1 | div верстка,уроки верстки,html верстка
Комментариев нет:
Отправить комментарий