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

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

Сдвиг (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 и translate могут сочетаться с переходами, чтобы создавать более яркий дизайн. Ключ к использованию этих преобразований с умом заключается в том, чтобы находить подходящие ситуации, в которых преобразования помогут рассказывать историю того, что показывается на экране.

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

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

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

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

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

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

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

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

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

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

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

Разметка

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

<ol id="things">

<li id="things-1">

<a href="#"><img src="img/doughnut.png"/></a>

<h2>1 big doughnut</h2>

</li>

<li id="things-2">

<a href="#"><img src="img/mower.png"/></a>

<h2>1 lawnmower</h2>

</li>

<li id="things-3">

<a href="#"><img src="img/cat.png"/></a>

<h2>1 astro cat</h2>

</li>

<li id="things-4">

<a href="#"><img src="img/recliner.png"/></a>

<h2>1 recliner</h2>

</li>

<li id="things-5">

<a href="#"><img src="img/gnome.png"/></a>

<h2>1 magic gnome</h2>

</li>

</ol>

Заметим, что мы назначили идентификатор

#things

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

:hover

каждого элемента.

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

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