Дэн Сидерхолм - CSS3 для веб-дизайнеров

Рис. 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.Предметы, которые будем преобразовывать

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

1. 1 big doughnut

2. 1 lawnmower

3. 1 astro cat

4. 1 recliner

5. 1 magic gnome

Заметим, что мы назначили идентификатор #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):