CSS3 для веб-дизайнеров - [18]
Реальность, впрочем, состоит в том, что с течением времени в браузеры добавили поддержку большинства CSS3-свойств из модуля «Фоны и границы» (http://bkaprt.com/css3/9/)[11]. Многие свойства, которые мы обсуждали ранее в этой книге, хорошо поддерживаются браузерами Safari, Chrome, Firefox, Opera и IE9 Beta. Благодаря свойствам >border-radius, >box-shadow, градиентам, RGBA и >opacity стало возможным в некоторых случаях разрешать часто возникающие задачи, вовсе не используя изображения. Многие приемы, которые ранее требовали использования картинок, стало возможно выполнять исключительно средствами стилевого листа. Все это несет очевидные преимущества.
Итак, несколько лет назад я впадал в восторг при мысли о поддержке множественных фонов; теперь я менее возбужден – потому что в нашем распоряжении сейчас масса других инструментов. При этом существуют изумительные способы использования множественных фонов, и в этой короткой главе мы поговорим об одной такой технике.
Параллакс
Если вновь обратиться к сайту-примеру с Луной, можно увидеть, как множественные фоновые изображения используются на элементе >body, чтобы создать составное космическое пространство. Вместо одного плоского изображения используются четыре полупрозрачные PNG, поставленные одна поверх другой. Каждой выставлено свое положение по горизонтали, чтобы создать эффект анимации, когда меняется размер окна браузера (рис. 5.01).
>Рис. 5.01. Фон на сайте– примере с Луной, где четыре PNG совмещены, чтобы создать эффект космоса
Этот прием быстрой смены слоев обрел название «параллакс», который наши друзья из Википедии определяют так:
Особенная техника прокрутки в компьютерной графике, впервые появившаяся в аркаде 1982 года Moon Patrol. В этой псевдотрехмерной технике «камера» двигает фоновые изображения медленнее, чем изображения на переднем плане. Так в двухмерной графике создается иллюзия глубины и погружения. Техника основана на многоплановых камерах, которые используются в традиционной анимации с 1940-х годов.[12]
В последние годы появилось много великолепных примеров того, как параллакс используется на вебе. Один из моих любимых – сайт Silverback (http://silverbackapp.com), удобное приложение для юзабилити-тестирования от ребят из Clearleft (рис. 5.02).
>Рис. 5.02. Измените размер окна браузера на сайте Silverback и насладитесь трехмерным пользовательским опытом
Изменяя размер окна, можно видеть, как ниспадающие виноградные лозы двигаются туда и обратно с разной скоростью, создавая ощущение объема. (Я просидел на этом сайте час, когда впервые увидел его.)
Разумеется, не все увидят это – но те, кто испытает это, увидят замечательную особенность и улучшенный пользовательский опыт: он не может не сделать зрителя чуточку более счастливым.
Старый способ: дополнительная разметка
Как это сделать? В начале 2008 года в статье для Think Vitamin Пол Аннетт написал о приемах, которые он использовал для создания эффекта параллакса именно на сайте Silverback (http://bkaprt.com/css3/10/)[13].
Чтобы наслоить отдельные PNG одну поверх другой, нужно создать как минимум три доступных элемента блочного уровня. Требуется два дополнительных оберточных слоя, чтобы расположить фоновое изображение на элементах >body, >#midground, >#foreground.
Разметка будет выглядеть приблизительно так:
>
> > > > >
>
CSS-код для размещения трех изображений с различными положениями по горизонтали выглядит так:
>body {
> background: url(vines-back.png) repeat-x 20% 0;
> }
>#midground {
> background: url(vines-mid.png) repeat-x 40% 0;
> }
>#foreground {
> background: url(vines-front.png) repeat-x 150% 0;
> }
Конечно, это решение работает как следует. Но оно значительно упрощается с использованием синтаксиса множественных фонов, которые приходят вместе с CSS3.
Посмотрим, как множественные фоны применяются к содержимому сайта с Луной и как создается более простой эффект параллакса для тех, кто может испытать его.
Новый способ: множественные фоны на CSS3
Я использую четыре полупрозрачных PNG-изображения, чтобы создать космический фон, используемый на сайте с Луной. Все они накладываются на элемент >body, одно поверх другого, чтобы создавать ощущение пространства, когда пользователь меняет размеры окна браузера.
На рис. 5.03 показаны все используемые изображения:
1) облака пыли (clouds.png);
2) сине-розовый градиент (space-bg.png);
3) звездный слой (stars-1.png);
4) еще один слой случайно разбросанных звезд (stars-2.png).
>Рис. 5.03. Четыре полупрозрачных фоновых PNG-изображения, которые расположены на фоне сайта с Луной
Синтаксис множественного фона
Поставить эти четыре изображения в качестве фона элемента >body очень просто с использованием нового синтаксиса CSS3:
>body {
> background:
> url(../img/stars-1.png) repeat-x fixed -130% 0,
> url(../img/stars-2.png) repeat-x fixed 40% 0,
> url(../img/space-bg.png) repeat-x fixed -80% 0,
> url(../img/clouds.png) repeat-x fixed 100% 0;
> background-color: #1a1a1a;
> }
Четыре изображения наслаиваются – облака в самый низ, звезды на самый верх – в виде списка, разделенного запятыми (обратите внимание, что перечисление начинается с того изображения, которое «ближе» к пользователю). Каждое изображение дублируется по горизонтали, и им выставлены различные положения по горизонтали (используя положительные и отрицательные значения), чтобы каждый слой двигался со своей скоростью, когда меняется размер окна браузера. Наконец, их положение на странице зафиксировано с помощью значения
