CSS3 для веб-дизайнеров, Сидерхолм Дэн

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

на обложку

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

Шрифт:

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

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

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

Поворот, кручение, сдвиг

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

Добавим поворот

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

:hover

ul.gallery li a: hover img {

– webkit-transform: scale(1.5) rotate(-10deg);

– moz-transform: scale(1.5) rotate(-10deg);

– o-transform: scale(1.5) rotate(-10deg);

transform: scale(1.5) rotate(-10deg);

– 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);

}

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

rotate