CSS3 для веб-дизайнеров
Шрифт:
Масштабирование
Возьмем горизонтальный список из трех фотографий с небольшой рамкой, на которых запечатлена недавняя поездка на Мартас-Виньярд, небольшой остров у побережья Массачусетса (рис. 4.01). Сетка из изображений-ссылок – вполне обыкновенный дизайнерский прием.
Рис. 4.01. Сетка из трех фотографий-ссылок
Для разметки
На рис. 4.02 видно, как выглядит список без применения стилей. Обратите внимание, что изображения существенно крупнее, чем нам нужно. Это сделано намеренно: мы воспользуемся CSS, чтобы уменьшить их.
Рис. 4.02. Список из крупных фотографий – до применения CSS
Добавим стиль
Добавим немного CSS, чтобы превратить этот вертикальный список в горизонтальную сетку; поставим обводку толщиной в один пиксель вокруг каждой картинки (также заметим, что фон страницы – легкий серый
Мы сдвинули элементы списка, отключили маркеры
Эти компактные правила дают нам то, что мы хотели получить (рис. 4.01).
Масштабирование в hover
Теперь – преобразования. Добавим преобразование
Масштабирование поддерживается в Safari, Chrome, Firefox и Opera; везде нужен браузерный префикс. Добавим свойства, которые работают в этих и всех будущих браузерах:
Когда ссылки переходят в состояние hover, мы говорим: «увеличь картинки в полтора раза относительно их изначального размера» (200px в ширину).
Команда
Результат показан на рис. 4.03 (браузер – Safari). Заметим, что
Рис. 4.03. Фото в центре увеличено с помощью CSS-трансформации
Также, если нужно, можно задать transform-origin, который объявит, относительно какой части картинки ее нужно масштабировать: верх, низ, центр или положение, обозначенное в процентах (см. [10] .
10
http://www.w3.org/tR/css3-2d-transforms/#transform-origin
Например, чтобы фотография увеличивалась относительно нижнего левого края, а не относительно центра, пишется такой код:
Подходящая тень
Можем пойти дальше и оттенять картинку, когда на нее наводят курсор. Это уместное использование CSS3-свойства
Заметим: падающая тень – это изысканный эффект, который часто используется сверх меры неразборчивыми дизайнерами. Очень легко увлечься и переусердствовать с получаемым эффектом. Но в этом случае мы пытаемся придать глубины увеличенной фотографии, так что должно получиться вполне хорошо.
Синтаксис box-shadow совпадает с синтаксисом свойства