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

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

Масштабирование

Возьмем горизонтальный список из трех фотографий с небольшой рамкой, на которых запечатлена недавняя поездка на Мартас-Виньярд, небольшой остров у побережья Массачусетса (рис. 4.01). Сетка из изображений-ссылок – вполне обыкновенный дизайнерский прием.

^{Рис. 4.01. Сетка из трех фотографий-ссылок}

Для разметки

мы вновь воспользуемся привычным ненумерованным списком:

<ul class="gallery">

<li><a href="#"><img src="photo-1.jpg" /></a></li>

<li><a href="#"><img src="photo-2.jpg" /></a></li>

<li><a href="#"><img src="photo-3.jpg" /></a></li>

</ul>

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

^{Рис. 4.02. Список из крупных фотографий – до применения CSS}

Добавим стиль

Добавим немного CSS, чтобы превратить этот вертикальный список в горизонтальную сетку; поставим обводку толщиной в один пиксель вокруг каждой картинки (также заметим, что фон страницы – легкий серый

#eee

).

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;

}

Мы сдвинули элементы списка, отключили маркеры

list-style

и обернули каждый элемент

li

в серую однопиксельную линию. Мы также сдвинули сами картинки и уменьшили их до 200 пикселей в ширину.

Эти компактные правила дают нам то, что мы хотели получить (рис. 4.01).

Масштабирование в hover

Теперь – преобразования. Добавим преобразование

scale

, чтобы фотография увеличивалась, когда на нее наводят курсор. Помним о том, что исходные изображения больше, чем 200 пикселей в ширину, – значит, фотографии можно увеличивать без потери качества.

Масштабирование поддерживается в Safari, Chrome, Firefox и Opera; везде нужен браузерный префикс. Добавим свойства, которые работают в этих и всех будущих браузерах:

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

}

Когда

ссылки переходят в состояние hover, мы говорим: «увеличь картинки в полтора раза относительно их изначального размера» (200px в ширину).

Команда

scale(2)

увеличит фотографию вдвое;

scale(0.5)

уменьшит ее вдвое.

Результат показан на рис. 4.03 (браузер – Safari). Заметим, что

transform

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

^{Рис. 4.03. Фото в центре увеличено с помощью CSS-трансформации}

Также, если нужно, можно задать transform-origin, который объявит, относительно какой части картинки ее нужно масштабировать: верх, низ, центр или положение, обозначенное в процентах (см. [10] .

10

http://www.w3.org/tR/css3-2d-transforms/#transform-origin

Например, чтобы фотография увеличивалась относительно нижнего левого края, а не относительно центра, пишется такой код:

ul.gallery li a: hover img {

– webkit-transform-origin: bottom left;

– moz-transform-origin: bottom left;

– o-transform-origin: bottom left;

transform-origin: bottom left;

– webkit-transform: scale(1.5);

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