Чтение онлайн

Мы добавили свойство

для браузеров WebKit и Mozilla, дополнив объявление беспрефиксной версией, как и в остальных примерах.

В терминах синтаксиса мы добавляем тень к картинке в состоянии hover. Параметры тени:

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

Рис. 4.04 показывает тень в сочетании с масштабированием – эффекты, которые применяются, когда фотография переходит в состояние hover. Получается так, словно увеличенная фотография выскальзывает из страницы.

Рис. 4.04. Увеличенная фотография в состоянии hover, под действием box-shadow

Напоследок, добавив переход на фотографию, мы сгладим масштабирование, навесив на состояние

анимированное увеличение и уменьшение фотографии. Такой эффект раньше можно было воспроизвести только на основе Flash или JavaScript; теперь он достигается несколькими строчками кода на CSS3.

Вот код, задающий переход; он добавлен к полному CSS-коду этой небольшой фотогалереи:

Обратим внимание, что на этот раз мы применяем переход к преобразованию

, поэтому подходящие браузерные префиксы записываются для обоих свойств – и .

Результат получился довольно впечатляющим, учитывая совсем небольшое количество написанного CSS-кода. Б'oльшая часть эффекта достигается непосредственно за счет браузеров, которые поддерживают CSS-свойства, – вместо того, чтобы привлекать такие технологии как Flash или JavaScript.

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

Например, пользователи Internet Explorer увидят лишь фотогалерею, составленную из маленьких изображений, на которые можно нажимать; это нормально. Если бы вид и поведение элементов в состоянии hover были бы критичны, тогда нам потребовалось бы переосмыслить использование CSS3.

Кроме масштабирования, есть еще три преобразования, которыми можно поворачивать, крутить и сдвигать элементы (сдвиг производится по координатам x, y). Добавим каждое преобразование в получившуюся фотогалерею, чтобы быстро разобраться, как они работают.

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

:

 

Мы по-прежнему увеличиваем фотографию в состоянии hover, но также поворачиваем ее на 10 градусов влево преобразованием

(рис. 4.05). Оно работает в Safari, Chrome, Firefox и Opera. Отрицательные значения от  до  поворачивают элемент против часовой стрелки; положительные значения от  до  – по часовой стрелке.