4. Преобразовывая содержимое. CSS для веб-дизайнеров.

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

4. Преобразовывая содержимое.

Как и СSS-переходы, CSS-трансформации были изначально разработаны командой WebKit, и затем их включили в два отдельных рабочих черновика W3C:

1. CSS 2D-преобразования (http://www.w3.org/tR/CSS-2d-transforms/);

2. CSS 3D-преобразования (http://www.w3.org/tR/CSS-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>

На рис. 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).

Масштабирование в hоvеr.

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

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

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

}

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

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

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

Синтаксис box-shadow совпадает с синтаксисом свойства text-shadow, которое мы применяли в третьей главе. Однако в отличие от text-shadow, чтобы box-shadow заработал в Sаfаri, Chrome и Firеfох, ему требуются браузерные префиксы (Opera 10+ и IЕ9 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 и Моzillа, дополнив объявление беспрефиксной версией, как и в остальных примерах.

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

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

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

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

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

Вот код, задающий переход; он добавлен к полному 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-кода. Бóльшая часть эффекта достигается непосредственно за счет браузеров, которые поддерживают CSS-свойства, – вместо того, чтобы привлекать такие технологии как Flash или JavaScript.

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

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

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

Кроме масштабирования, есть еще три преобразования, которыми можно поворачивать, крутить и сдвигать элементы (сдвиг производится по координатам 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 (рис. 4.05). Оно работает в Sаfаri, Chrome, Firefox и Ореrа. Отрицательные значения от –1deg до –360deg поворачивают элемент против часовой стрелки; положительные значения от 1deg до 360deg – по часовой стрелке.

^{Рис. 4.05. Фото в состоянии hover, увеличенное и повернутое влево при помощи преобразования rotate.}

Кроме того, можно было бы поворачивать фотографии по-разному (задавая каждой фотографии свой угол поворота), чтобы каждая выглядела так, будто бы ее не глядя кинули на стол. Затем ее точно так же можно поворачивать и масштабировать в состоянии :hover (рис. 4.06).

^{Рис. 4.06. С помощью rotate можно представить фотографии разбросанными по странице.}

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

Например, если браузер не поддерживает преобразование rotate и фотографии выглядят ровными, в этом нет беды. Сайт по-прежнему будет выглядеть работающим.

Нет поворота? Паника ни к чему.

Хороший пример использования rotate в основном дизайне странице можно найти в блоге компании Panic Software (http://www.panic.com/blog), где применяются крайне малозаметные CSS-повороты, которые поворачивают записи налево, как будто это листы бумаги, оставленные на столе (рис. 4.07). Такой эффект – не критически важная часть дизайна, и без поворота этот сайт также выглядит прекрасно (рис. 4.08).

^{Рис. 4.07. В дизайне блога Panic Software используются небольшие CSS– повороты, чтобы добавить реалистичности.}

^{Рис. 4.08. Без поворота блог по-прежнему выглядит замечательно.}

Повернутое Солнце.

Другой хороший пример подходящего использования CSS-преобразований – сайт Outside (http://outsideapp.com), прекрасного приложения о погоде для iPhone (рис. 4.09).

^{Рис. 4.09. Outside, приложение для iPhone, использует rotate, чтобы вращать Солнце.}

В самом верху страницы показывается изображение Солнца (рис. 4.10), которое вращается на 360° с помощью преобразования rotate. (В этом случае JavaScript используется для анимации поворота в браузерах, работающих на отличном от WеbКit движке, но в шестой главе мы поговорим об анимациях, построенных на чистом CSS.) Это изящное улучшение дизайна просто и уместно, так как оно имитирует ту же анимацию Солнца, которая появляется в самом приложении на iРhоnе. Солнце не вращается в браузерах, которые не поддерживают CSS-преобразования, и это нормально. Ничто не выглядит неработающим в неанимированной версии сайта.

Преобразования в сочетании с переходами в СSS могут помочь поддержать общее сообщение, которое несет дизайн, создаваемый для веба, и это прекрасный инструмент для нас, веб-дизайнеров.

^{Рис. 4.10. Графика на сайте приложения Outside оживает с помощью позиционирования и вращения на CSS.}

Кручение (skew).

Преобразование skew берет координаты x, y и прокручивает элемент. Например, если мы хотим применить кручение в нашей фотогалерее, пишется следующий CSS-код. Параметры кручения: –5 градусов по координате x, 30 градусов по координате y (рис. 4.11):

^{Рис. 4.11. Преобразование skew деформирует фотографию.}

Ul.gallery li a: hover img {

-webkit-transform: scale(1.5) skew(-5deg, 30deg);

-moz-transform: scale(1.5) skew(-5deg, 30deg);

-o-transform: scale(1.5) skew(-5deg, 30deg);

Transform: scale(1.5) skew(-5deg, 30deg);

}

Как и rotate, преобразование skew принимает положительные и отрицательные значения углов. Также можно использовать одно значение и для x, и для y (рис. 4.12):

^{Рис. 4.12. Закручивание фотографии на 30 градусов по обеим осям, x и y.}

Ul.gallery li a: hover img {

-webkit-transform: scale(1.5) skew(30deg);

-moz-transform: scale(1.5) skew(30deg);

-o-transform: scale(1.5) skew(30deg);

Transform: scale(1.5) skew(30deg);

}

Разумеется, я осознаю, что полученный результат выглядит не слишком привлекательно, и, признаться, я и сам не использую skew слишком часто; однако я убежден, что существуют интересные способы применения этого преобразования.

Например, skew может использоваться на текстовых блоках, чтобы создавать трехмерные визуализации на основе семантической разметки и СSS (рис. 4.13 и 4.14).

^{Рис. 4.13. Демо Пола Хэйза использует skew и переходы для создания трехмерных кубов из простых кусков гипертекста (http://www.paulrhayes.com/experiments/cube/multiCubes.html}⁾

^{Рис. 4.14. The Web Trend Map использует skew, чтобы разместить аватары на изометрической сетке, таким образом создавая уникальные визуализации данных на основе плоских элементов (http://www.webtrendmap.com/}⁾

Сдвиг (translate).

Наконец, преобразование translate позволяет сдвигать элемент относительно его обычного положения на экране, используя координаты x, y.

Например, если в состоянии hover хочется сдвинуть изображение с его начального положения, можно применить преобразование translate. Применив переход, такое движение можно плавно анимировать.

Представленный ниже код сдвинет изображение на 20px вправо и на 40px вниз относительно изначального положения (рис. 4.15):

^{Рис. 4.15. Использование преобразования translate для сдвига изображения в состоянии: hover.}

Ul.gallery li a: hover img {

-webkit-transform: scale(1.5) translate(20px, 40px);

-moz-transform: scale(1.5) translate(20px, 40px);

-o-transform: scale(1.5) translate(20px, 40px);

Transform: scale(1.5) translate(20px, 40px);

}

Если нужно сдвинуть изображение влево и/или вверх, используются отрицательные значения: например, translate (–20px, –40px).

Как и вышеупомянутые преобразования, translate не затрагивает остальные элементы в документе и сдвигает указанный элемент именно туда, куда нужно. Это означает, что не нужно думать о полях, отступах, абсолютном позиционировании и об использовании свойства clear для плавающих элементов. Достаточно дать translate нужные координаты, и элемент встанет на указанное место.

_{Разные преобразования, помогающие поддержать рассказ.}

Пример фотогалереи показал, как преобразования scale, rotate, skew и trаnslаtе могут сочетаться с переходами, чтобы создавать более яркий дизайн. Ключ к использованию этих преобразований с умом заключается в том, чтобы находить подходящие ситуации, в которых преобразования помогут рассказывать историю того, что показывается на экране.

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

Преобразования Луны.

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

^{Рис. 4.16. Фотогалерея на сайте Things We Left on the Moon.}

Когда наводишь на любую оставленную на Луне вещь, изображение реагирует особенным образом, в зависимости от того, что это за предмет: пончик, газонокосилка, кошка и т. д.

Добавлять подходящие преобразования и переходы на каждый элемент не только приятно и легко, но также никак не влияет на браузеры, которые не поддерживают CSS-механизмы, благодаря которым такое взаимодействие возможно.

Пройдемся по всем элементам и посмотрим, как scale, rotate, позиционирование и орасitу сочетаются с переходами, создавая полноценное взаимодействие.

Поддержка сообщения.

Если подумать о каждом предмете и в особенности о его значении, можно применить преобразование и/или переход, который поможет раскрыть смысл этого предмета.

Как большой пончик или откидное кресло будут реагировать на взаимодействие? Мы можем выбрать и применить подходящие CSS-приемы, чтобы улучшить дизайн (рис. 4.17).

^{Рис. 4.17. Предметы, которые будем преобразовывать.}

Разметка.

Семантика разметки этой искусственной карусели странных вещей очень проста: обычный упорядоченный список, составленный из картинок-ссылок, с поясняющим заголовком под каждой картинкой.

<h2>1 big doughnut</h2>

</li>

<h2>1 lawnmower</h2>

</li>

<h2>1 astro cat</h2>

</li>

<h2>1 recliner</h2>

</li>

<h2>1 magic gnome</h2>

</li>

</ol>

Заметим, что мы назначили идентификатор #things самому списку, равно как и отдельный идентификатор каждому элементу списка, так что мы сможем описывать самостоятельные взаимодействия для состояния :hover каждого элемента.

Основные стили для каждого предмета.

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

Ol#things li {

Position: relative;

Float: left;

Margin: 0 15px 0 0;

Padding: 10px;

Background: #444; /* backup for non-RGBA */

Background: rgba(255, 255, 255, 0.1);

List-style: none;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

Border-radius: 4px;

}

Зададим фоновое изображение Луны, которая будет отображаться позади каждого предмета, и укажем ширину и высоту каждой ссылки (рис. 4.18):

^{Рис. 4.18. Элементы списка, теперь с изображением Луны на фоне.}

Ol#things li a {

Float: left;

Width: 137px;

Height: 91px;

Background: url(../img/moon-137.jpg).

No-repeat top left;

}

Общее правило.

Следующий шаг – написать общее правило, которое абсолютно спозиционирует каждое изображение внутри элемента списка и, соответственно, поверх изображения Луны.

Каждый элемент будет спозиционирован по-своему в зависимости от объекта; также будут использоваться различные преобразования. Но мы можем объявить position: absolute; для всех изображений, так что не придется дублировать это правило для каждого элемента. Мы также добавим переход, пользуясь значением all. Таким образом каждое преобразование или изменение, которое мы хотим применить на каждый предмет, будет сглажено с помощью перехода – вне зависимости от того, какие CSS-свойства мы решим менять.

Ol#things li a img {

Position: absolute;

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

-o-transition: all 0.2s ease-in;

Transition: all 0.2s ease-in;

}

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

Ol#things li#things-1 a img {

Width: 60px;

Top: 23px;

Left: 26px;

}

Ol#things li#things-2 a img {

Width: 50px;

Top: 20px;

Left: 50px;

}

Ol#things li#things-3 a img {

Width: 80px;

Top: 19px;

Left: 30px;

}

Ol#things li#things-4 a img {

Width: 70px;

Top: 25px;

Left: 45px;

}

Ol#things li#things-5 a img {

Width: 80px;

Top: 20px;

Left: 34px;

}

Я создал эти изображения большими, так что если мы хотим масштабировать их, мы можем делать это, не искажая изображения.

Теперь добавим отдельное поведение для состояния :hover каждого из элементов, помня о том, что общее правило сгладит и анимирует любые изменения, которые мы придумаем.

Масштабируем большой пончик.

Большой пончик становится больше при наведении, так что воспользуемся преобразованием scale, чтобы увеличить изображение. Помните, что исходное изображение, заданное в разметке, значительно больше, чем те размеры, которые мы объявили в стилевом файле. Это было сделано намеренно, чтобы изображение можно было увеличить:

Ol#things li#things-1 a: hover img {

-webkit-transform: scale(1.25);

-moz-transform: scale(1.25);

-o-transform: scale(1.25);

Transform: scale(1.25);

}

Эти правила увеличат пончик на 25% при наведении курсора. На рис. 4.19 показаны оба состояния – обычное и: hover; видно, что пончик становится больше.

^{Рис. 4.19. Большой пончик увеличивается в состоянии: hover с помощью свойства scale.}

Перспектива: масштабирование и позиционирование.

С газонокосилкой мы сделаем две вещи:

1) увеличим ее с помощью преобразования;

2) сдвинем ее вниз и вправо.

Эти два изменения в сочетании с переходом создадут эффект приближения газонокосилки в сторону зрителя (осторожно!). Он совсем незначительный, но простой и эффективный.

Мы будем сдвигаться на 5 пикселей вниз и на 10 пикселей вправо. Также мы добавим преобразование, чтобы увеличить газонокосилку на 20%.

Ol#things li#things-2 a: hover img {

Top: 25px;

Left: 60px;

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

Transform: scale(1.2);

}

На рис. 4.20 показаны обычное и активное состояния картинки. Иллюзия приближающейся газонокосилки закончена.

^{Рис. 4.20. Позиционирование и масштабирование в сочетании дают псевдотрехмерный эффект.}

Ускользающая космическая кошка.

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

Когда свойство left у изображения в состоянии hover изменяется, общий переход будет сглаживать это изменение и кошка будет выглядеть так, будто бы она скользит из стороны в сторону.

Сдвинем ее на 15px вправо, повышая значение left с 30px до 45px (рис. 4.21):

^{Рис. 4.21. Кошка скользит туда и обратно, как она часто делает.}

Ol#things li#things-3 a: hover img {

Left: 45px;

}

Довольно просто. Вся магия здесь осуществляется CSS-переходом (ее сложно изобразить на листе бумаги).

Откидное кресло.

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

Добавим преобразование, которое будет слегка поворачивать кресло влево. Мы будем использовать браузерные префиксы для WebKit, Mozilla и Ореrа и завершим объявление свойством transform – для будущих браузеров.

Ol#things li#things-4 a: hover img {

-webkit-transform: rotate(-15deg);

-moz-transform: rotate(-15deg);

-o-transform: rotate(-15deg);

Transform: rotate(-15deg);

}

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

^{Рис. 4.22. Кресло откидывается влево с помощью отрицательного параметра у преобразования rotate.}

Исчезающий гном.

Для последнего элемента списка мы возьмем гнома и сделаем так, чтобы он частично исчезал. Почему-то кажется, что для гнома это чрезвычайно естественный поступок.

Будем использовать свойство opacity, чтобы просто и быстро составить стиль для состояния hover этого изображения, делая его существенно более тусклым. Поскольку переход уже определен для изменения всех свойств изображения, изменение значения opacity будет анимироваться в браузерах, которые поддерживают переходы, и будет выглядеть как плавное исчезновение нашего маленького друга.

Объявление просто:

Ol#things li#things-5 a: hover img {

Opacity: 0.4;

}

На рис. 4.23 показано, как в состоянии :hover гном растворяется в 40% непрозрачности.

Помните: если нужно, чтобы этот эффект точно так же работал в Intеrnеt Explorer, можно использовать хак с проприетарным свойством filter, описанный в третьей главе.

^{Рис. 4.23. Гном почти исчезает за счет уменьшения opacity в состоянии: hover.}

^{Безопасное упрощение.}

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

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

Еще раз: используйте с умом.

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

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

Постарайтесь и будьте аккуратны, работая с СSS-преобразованиями. Очень легко увлечься ими, но когда используешь их с умом, они будут играть решающую роль в том, как читатель воспринимает мысль, которую передает сайт.

Побольше «вау-вау», пожалуйста.

Говоря о том, что можно увлечься: в следующий раз, когда ваш клиент или босс скажет «Этому дизайну нужно больше “вау”», просто добавьте следующие строки в стилевой файл (и убедитесь, что человек будет просматривать сайт в Sаfаri, Chrome, Firefox или Opera):

*:hover {

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

Transform: rotate(180deg);

}

Этот маленький кусок CSS-кода говорит: «Когда наводишь на любой элемент на странице, он развернется на 180 градусов». Попробуйте. Это гарантированный способ произвести сильное впечатление (рис. 4.24).

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

– Это превосходно! Выкладывайте это!

Эх.

^{Рис. 4.24. Попытка передать на бумаге тот хаос, который порождается приемом «переворачивать все элементы, которые попадают в состояние hover».}

Оглавление.