CSS3 для веб-дизайнеров
вернуться

Сидерхолм Дэн
Шрифт:

– moz-transform: scale(1.5);

– o-transform: scale(1.5);

transform: scale(1.5);

}

Подходящая тень

Можем пойти дальше и оттенять картинку, когда на нее наводят курсор. Это уместное использование CSS3-свойства

box-shadow
, так как мы заставляем увеличенную фотографию выглядеть так, как будто она приподнимается над страницей.

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

Синтаксис box-shadow совпадает с синтаксисом свойства

text-shadow
, которое мы применяли в третьей главе. Однако в отличие от 
text-shadow
, чтобы box-shadow заработал в Safari, Chrome и Firefox, ему требуются браузерные префиксы (Opera 10+ и IE9 Beta поддерживают беспрефиксное свойство
box-shadow
). Запишем эти правила.

ul.gallery li a: hover img {

– webkit-transform: scale(1.5);

– moz-transform: scale(1.5);

– o-transform: scale(1.5);

transform: scale(1.5);

– webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

– moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

}

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

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

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

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

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

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

Сгладим масштабирование переходом

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

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

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

ul.gallery li {

float: left;

margin: 0 10px;

padding: 10px;

border: 1px solid #ddd;

list-style: none;

}

ul.gallery li a img {

float: left;

width: 200px;

– webkit-transition: – webkit-transform 0.2s ease-in-out;

– moz-transition: – moz-transform 0.2s ease-in-out;

transition: transform 0.2s ease-in-out;

}

ul.gallery li a: hover img {

– webkit-transform: scale(1.5);

– moz-transform: scale(1.5);

– o-transform: scale(1.5);

transform: scale(1.5);

– webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

– moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

}

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

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

Преобразовывая взаимодействие

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