CSS3 для веб-дизайнеров

Сидерхолм Дэн

Грустная часть заключается в том, что некоторым клиентам и начальникам это может понравиться.

– Это превосходно! Выкладывайте это!

Эх.

^{Рис. 4.24. Попытка передать на бумаге тот хаос, который порождается приемом «переворачивать все элементы, которые попадают в состояние hover»}

5. Множественные фоны

Если бы два года назад меня спросили «Чего ты больше всего ждешь от CSS3?», я мог бы с энтузиазмом ответить: множественных фоновых изображений! В то время возможность

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

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

Реальность, впрочем, состоит в том, что с течением времени в браузеры добавили поддержку большинства CSS3-свойств из модуля «Фоны и границы» [11] . Многие свойства, которые мы обсуждали ранее в этой книге, хорошо поддерживаются браузерами Safari, Chrome, Firefox, Opera и IE9 Beta. Благодаря свойствам

border-radius

,

box-shadow

, градиентам, RGBA и

opacity

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

11

http://www.w3.org/tR/Css3-background/

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

Параллакс

Если вновь обратиться к сайту-примеру с Луной, можно увидеть, как множественные фоновые изображения используются на элементе

body

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

^{Рис. 5.01. Фон на сайте– примере с Луной, где четыре PNG совмещены, чтобы создать эффект космоса}

Этот прием быстрой смены слоев обрел название «параллакс», который наши друзья из Википедии определяют так:

Особенная техника прокрутки в компьютерной графике, впервые появившаяся в аркаде 1982 года Moon Patrol. В этой псевдотрехмерной технике «камера» двигает фоновые изображения медленнее, чем изображения на переднем плане. Так в двухмерной графике создается иллюзия глубины и погружения. Техника основана на многоплановых камерах, которые используются в традиционной анимации с 1940-х годов. [12]

12

http://en.wikipedia.org/wiki/Parallax_scrolling

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

на вебе. Один из моих любимых – сайт Silverback , удобное приложение для юзабилити-тестирования от ребят из Clearleft (рис. 5.02).

^{Рис. 5.02. Измените размер окна браузера на сайте Silverback и насладитесь трехмерным пользовательским опытом}

Изменяя размер окна, можно видеть, как ниспадающие виноградные лозы двигаются туда и обратно с разной скоростью, создавая ощущение объема. (Я просидел на этом сайте час, когда впервые увидел его.)

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

Старый способ: дополнительная разметка

Как это сделать? В начале 2008 года в статье для Think Vitamin Пол Аннетт написал о приемах, которые он использовал для создания эффекта параллакса именно на сайте Silverback [13] .

13

http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/

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

body

,

#midground

,

#foreground

.

Разметка будет выглядеть приблизительно так:

<body>

<div id="midground">

<div id="foreground">

<!– page content here – >

</div>

</div>

</body>

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