Дэн Сидерхолм - CSS3 для веб-дизайнеров
Воспользовавшись хаками, мы добились такого же результата в IE (рис. 3.20). Повторюсь – если решили использовать хаки, пользуйтесь ими с умом. Но реальность заключается в том, что, скорее всего, вам придется использовать хаки, если какой-либо ваш сайт показывает значительный трафик с IE (так обстоит ситуация с большинством сайтов).
Рис. 3.20. Футер в IE7 показывает псевдосвойство opacity с использованием хака filter
Добавим переход
Наконец, наложим переход на свойство opacity, который сгладит изменение свойства и добавит немного приятной глазу анимации, дополняющей эффект.
Добавим знакомые строки transition, на этот раз объявляя переход исключительно для свойства opacity. Сделаем его быстрым (0,2 секунды) и выставим временную функцию ease-in-out.
#footer-logos a img {
opacity: 0.25;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5–7 hack */
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#footer-logos a: hover img,
#footer-logos a: focus img {
opacity: 0.6;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */
filter: alpha(opacity = 60); /* IE 5–7 hack */
}
С использованием перехода мы получили простой метод использования opacity для создания гибкого взаимодействия в состоянии hover на основе лишь одного набора изображений.
Вперед, к новому hover
Ранее я упоминал, что такой подход повлиял на то, как я думаю о подготовке графики для сайтов. Мы можем пользоваться свойством opacity, чтобы управлять тем, как графика выглядит в обычном состоянии, смешивая ее с фоном – и затем применять другие значения для состояний :hover, :focus и :active. Мы также можем сочетать это изменение с CSS3-переходом для тех браузеров, в которых они поддерживаются.
Помните о свойстве opacity в следующий раз, когда вы будете создавать отдельный вид картинок-ссылок в состоянии hover. Вы выиграете время, трафик и избавитесь от лишней сложности, которая может содержаться в других решениях.
Оформление состояния hover средствами CSS3 заключается прежде всего в добавлении простых стилей, которые расширяют взаимодействие, удивляя и восхищая пользователей – пользователей тех браузеров, в которых поддерживаются эти свойства. Если браузер не поддерживает созданное высококачественное взаимодействие, это нормально – посетитель сайта не узнает, что он упускает.
4. Преобразовывая содержимое
Как и CSS-переходы, CSS-трансформации были изначально разработаны командой WebKit, и затем их включили в два отдельных рабочих черновика W3C:
1. CSS 2D-преобразования (http://www.w3.org/tR/Css3-2d-transforms/);
2. CSS 3D-преобразования (http://www.w3.org/tR/Css3-3d-transforms/).
В этой книге мы поговорим исключительно о 2D-преобразованиях, так как прямо сейчас они больше всего пригодны для использования. Знанием о 3D-преобразованиях можно написать отдельную книгу, и они прекрасны, волшебны. Но у 2D-преобразований (как и у переходов) лучше обстоят дела с поддержкой браузерами: Safari 3.2, Chrome 3.2, Firefox 4.0, Opera 10.5.
Итак, что такое CSS-преобразования? W3C описывает их так:
CSS 2D-преобразования позволяют преобразовывать на плоскости элементы, отображенные посредством CSS9[9].
Здорово, все понятно. Лучший способ понять, что такое преобразования, – увидеть их в действии.
Давайте сначала посмотрим на простой пример: будем применять различные плоские преобразования к небольшой фотогалерее. Затем (в этой главе) мы воспользуемся теми же приемами на практике на сайте о Луне.
Масштабирование
Возьмем горизонтальный список из трех фотографий с небольшой рамкой, на которых запечатлена недавняя поездка на Мартас-Виньярд, небольшой остров у побережья Массачусетса (рис. 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, который объявит, относительно какой части картинки ее нужно масштабировать: верх, низ, центр или положение, обозначенное в процентах (см. http://bkaprt.com/css3/8/)[10].
Например, чтобы фотография увеличивалась относительно нижнего левого края, а не относительно центра, пишется такой код:
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);
-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, полупрозрачный черный цвет (чтобы тень смешивалась с любым фоном или элементом, который находится позади нее).
