CSS3 для веб-дизайнеров
Шрифт:
Безопасное упрощение
Как и в примере с фотогалереей, который обсуждался ранее в этой главе, брызги CSS3, которые мы добавляем в этом примере, никак не затрагивают браузеры, которые пока что не поддерживают эти свойства.
В итоге самое важное, что каждый из этих элементов – ссылка, на которую можно нажать. Все остальное – это расширенное взаимодействие, созданное для тех, кто способен увидеть его.
Еще раз: используйте с умом
Потратив немного времени на размышления о смысле содержимого, с которым мы работаем, мы можем выбрать некоторые свойства CSS3, которые функционируют сегодня, вместе с переходами и преобразованиями.
Такие улучшения взаимодействия могут быть знаком по-настоящему
Постарайтесь и будьте аккуратны, работая с CSS-преобразованиями. Очень легко увлечься ими, но когда используешь их с умом, они будут играть решающую роль в том, как читатель воспринимает мысль, которую передает сайт.
Побольше «вау-вау», пожалуйста
Говоря о том, что можно увлечься: в следующий раз, когда ваш клиент или босс скажет «Этому дизайну нужно больше “вау”», просто добавьте следующие строки в стилевой файл (и убедитесь, что человек будет просматривать сайт в Safari, Chrome, Firefox или Opera):
Этот маленький кусок CSS3-кода говорит: «Когда наводишь на любой элемент на странице, он развернется на 180 градусов». Попробуйте. Это гарантированный способ произвести сильное впечатление (рис. 4.24).
Грустная часть заключается в том, что некоторым клиентам и начальникам это может понравиться.
– Это превосходно! Выкладывайте это!
Эх.
Рис. 4.24. Попытка передать на бумаге тот хаос, который порождается приемом «переворачивать все элементы, которые попадают в состояние hover»
5. Множественные фоны
Если бы два года назад меня спросили «Чего ты больше всего ждешь от CSS3?», я мог бы с энтузиазмом ответить: множественных фоновых изображений! В то время возможность показывать несколько фоновых изображений одного элемента казалась прекрасным лекарством от головной боли, которую испытывали веб-дизайнеры.
Чтобы создавать гибкие и устойчивые решения проблем дизайна, мы должны выяснить, как мы можем обойтись использованием меньшего количества графических элементов или без добавления лишней разметки, чтобы получить несколько фоновых изображений. Мы делали самое лучшее, пользуясь теми средствами, что были под рукой, но обещанная возможность назначать элементу множественные фоновые изображения всегда казалась мне восхитительной – жить станет легче, ведь нужно будет писать меньше кода.
Реальность, впрочем, состоит в том, что с течением времени в браузеры добавили поддержку большинства CSS3-свойств из модуля «Фоны и границы» [11] . Многие свойства, которые мы обсуждали ранее в этой книге, хорошо поддерживаются браузерами Safari, Chrome, Firefox, Opera и IE9 Beta. Благодаря свойствам
11
http://www.w3.org/tR/Css3-background/
Итак,
несколько лет назад я впадал в восторг при мысли о поддержке множественных фонов; теперь я менее возбужден – потому что в нашем распоряжении сейчас масса других инструментов. При этом существуют изумительные способы использования множественных фонов, и в этой короткой главе мы поговорим об одной такой технике.Параллакс
Если вновь обратиться к сайту-примеру с Луной, можно увидеть, как множественные фоновые изображения используются на элементе
Рис. 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 одну поверх другой, нужно создать как минимум три доступных элемента блочного уровня. Требуется два дополнительных оберточных слоя, чтобы расположить фоновое изображение на элементах
Разметка будет выглядеть приблизительно так: