Дэн Сидерхолм - CSS3 для веб-дизайнеров
Мы будем сдвигаться на 5 пикселей вниз и на 10 пикселей вправо. Также мы добавим преобразование, чтобы увеличить газонокосилку на 20%.
ol#things li#things-2 a: hover img {
top: 25px;
left: 60px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
На рис. 4.20 показаны обычное и активное состояния картинки. Иллюзия приближающейся газонокосилки закончена.
Рис. 4.20. Позиционирование и масштабирование в сочетании дают псевдотрехмерный эффект
Ускользающая космическая кошка
Мы можем добавить CSS-переход на весь набор свойств (не только CSS3). Достаточно сгладить изменение положения, чтобы космическая кошка выглядела так, будто бы она ускользает от мыши.
Когда свойство left у изображения в состоянии hover изменяется, общий переход будет сглаживать это изменение и кошка будет выглядеть так, будто бы она скользит из стороны в сторону.
Сдвинем ее на 15px вправо, повышая значение left с 30px до 45px (рис. 4.21):
Рис. 4.21. Кошка скользит туда и обратно, как она часто делает
ol#things li#things-3 a: hover img {
left: 45px;
}
Довольно просто. Вся магия здесь осуществляется CSS-переходом (ее сложно изобразить на листе бумаги).
Откидное кресло
Хорошее кресло откидывается назад. Мы можем имитировать это поведение посредством ранее упомянутого преобразования rotate.
Добавим преобразование, которое будет слегка поворачивать кресло влево. Мы будем использовать браузерные префиксы для WebKit, Mozilla и Opera и завершим объявление свойством transform – для будущих браузеров.
ol#things li#things-4 a: hover img {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
Мы использовали отрицательное значение, чтобы сдвинуть изображение влево (против часовой стрелки), и, как прежде, переход сгладит этот небольшой поворот, завершая иллюзию комфортного бархатного кресла на Луне (рис. 4.22).
Рис. 4.22. Кресло откидывается влево с помощью отрицательного параметра у преобразования rotate
Исчезающий гном
Для последнего элемента списка мы возьмем гнома и сделаем так, чтобы он частично исчезал. Почему-то кажется, что для гнома это чрезвычайно естественный поступок.
Будем использовать свойство opacity, чтобы просто и быстро составить стиль для состояния hover этого изображения, делая его существенно более тусклым. Поскольку переход уже определен для изменения всех свойств изображения, изменение значения opacity будет анимироваться в браузерах, которые поддерживают переходы, и будет выглядеть как плавное исчезновение нашего маленького друга.
Объявление просто:
ol#things li#things-5 a: hover img {
opacity: 0.4;
}
На рис. 4.23 показано, как в состоянии :hover гном растворяется в 40% непрозрачности.
Помните: если нужно, чтобы этот эффект точно так же работал в Internet Explorer, можно использовать хак с проприетарным свойством filter, описанный в третьей главе.
Рис. 4.23. Гном почти исчезает за счет уменьшения opacity в состоянии: hover
Безопасное упрощение
Как и в примере с фотогалереей, который обсуждался ранее в этой главе, брызги CSS3, которые мы добавляем в этом примере, никак не затрагивают браузеры, которые пока что не поддерживают эти свойства.
В итоге самое важное, что каждый из этих элементов – ссылка, на которую можно нажать. Все остальное – это расширенное взаимодействие, созданное для тех, кто способен увидеть его.
Еще раз: используйте с умом
Потратив немного времени на размышления о смысле содержимого, с которым мы работаем, мы можем выбрать некоторые свойства CSS3, которые функционируют сегодня, вместе с переходами и преобразованиями.
Такие улучшения взаимодействия могут быть знаком по-настоящему искусного веб-мастера: внимание к деталям, которые не все заметят, забота о некритических визуальных событиях и поднятие сообщения на шаг выше привычного уровня. Для браузеров, которые поддерживают эти штуки сейчас, и тех, которые будут поддерживать их в будущем, небольшое количество кода и размышлений вполне стоит того.
Постарайтесь и будьте аккуратны, работая с CSS-преобразованиями. Очень легко увлечься ими, но когда используешь их с умом, они будут играть решающую роль в том, как читатель воспринимает мысль, которую передает сайт.
Побольше «вау-вау», пожалуйста
Говоря о том, что можно увлечься: в следующий раз, когда ваш клиент или босс скажет «Этому дизайну нужно больше “вау”», просто добавьте следующие строки в стилевой файл (и убедитесь, что человек будет просматривать сайт в Safari, Chrome, Firefox или Opera):
*:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Этот маленький кусок CSS3-кода говорит: «Когда наводишь на любой элемент на странице, он развернется на 180 градусов». Попробуйте. Это гарантированный способ произвести сильное впечатление (рис. 4.24).
Грустная часть заключается в том, что некоторым клиентам и начальникам это может понравиться.
– Это превосходно! Выкладывайте это!
Эх.
Рис. 4.24. Попытка передать на бумаге тот хаос, который порождается приемом «переворачивать все элементы, которые попадают в состояние hover»
5. Множественные фоны
Если бы два года назад меня спросили «Чего ты больше всего ждешь от CSS3?», я мог бы с энтузиазмом ответить: множественных фоновых изображений! В то время возможность показывать несколько фоновых изображений одного элемента казалась прекрасным лекарством от головной боли, которую испытывали веб-дизайнеры.
Чтобы создавать гибкие и устойчивые решения проблем дизайна, мы должны выяснить, как мы можем обойтись использованием меньшего количества графических элементов или без добавления лишней разметки, чтобы получить несколько фоновых изображений. Мы делали самое лучшее, пользуясь теми средствами, что были под рукой, но обещанная возможность назначать элементу множественные фоновые изображения всегда казалась мне восхитительной – жить станет легче, ведь нужно будет писать меньше кода.
Реальность, впрочем, состоит в том, что с течением времени в браузеры добавили поддержку большинства 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).
