Пример фотогалереи показал, как преобразования scale, rotate, skew и translate могут сочетаться с переходами, чтобы создавать более яркий дизайн. Ключ к использованию этих преобразований с умом заключается в том, чтобы находить подходящие ситуации, в которых преобразования помогут рассказывать историю того, что показывается на экране.
Опять-таки очень легко увлечься преобразованиями, потому что они классные и их легко использовать. Но крайне важно находить подходящие места для их применения, чтобы получить лучший продукт.
Преобразования Луны
Вернемся к сайту-примеру с Луной, где я использовал различные преобразования и переходы, чтобы оживить взаимодействие с фотогалереей (рис. 4.16).
Рис. 4.16. Фотогалерея на сайте Things We Left on the Moon
Когда наводишь на любую оставленную на Луне вещь, изображение реагирует особенным образом, в зависимости от того, что это за предмет: пончик, газонокосилка, кошка и т. д.
Добавлять подходящие преобразования и переходы на каждый элемент не только приятно и легко, но также никак не влияет на браузеры, которые не поддерживают CSS3-механизмы, благодаря которым такое взаимодействие возможно.
Пройдемся по всем элементам и посмотрим, как scale, rotate, позиционирование и opacity сочетаются с переходами, создавая полноценное взаимодействие.
Поддержка сообщения
Если подумать о каждом предмете и в особенности о его значении, можно применить преобразование и/или переход, который поможет раскрыть смысл этого предмета.
Как большой пончик или откидное кресло будут реагировать на взаимодействие? Мы можем выбрать и применить подходящие CSS3-приемы, чтобы улучшить дизайн (рис. 4.17).
Рис. 4.17. Предметы, которые будем преобразовывать
Разметка
Семантика разметки этой искусственной карусели странных вещей очень проста: обычный упорядоченный список, составленный из картинок-ссылок, с поясняющим заголовком под каждой картинкой.
1 big doughnut
1 lawnmower
1 astro cat
1 recliner
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):
Рис. 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-переход на весь набор свойств (не только CSS3). Достаточно сгладить изменение положения, чтобы космическая кошка выглядела так, будто бы она ускользает от мыши.
Когда свойство
left
у изображения в состоянии hover изменяется, общий переход будет сглаживать это изменение и кошка будет выглядеть так, будто бы она скользит из стороны в сторону.Сдвинем ее на 15px вправо, повышая значение left с
30px
до 45px
(рис. 4.21):
Рис. 4.21. Кошка скользит туда и обратно, как она часто делает
ol#things li#things-3 a: hover img {
left: 45px;
}
Довольно просто. Вся магия здесь осуществляется CSS-переходом (ее сложно изобразить на листе бумаги).
Откидное кресло
Хорошее кресло откидывается назад. Мы можем имитировать это поведение посредством ранее упомянутого преобразования rotate.
Добавим преобразование, которое будет слегка поворачивать кресло влево. Мы будем использовать браузерные префиксы для WebKit, Mozilla и Opera и завершим объявление свойством
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% непрозрачности.Помните: если нужно, чтобы этот эффект точно так же работал в Internet Explorer, можно использовать хак с проприетарным свойством
filter
, описанный в третьей главе.
Рис. 4.23. Гном почти исчезает за счет уменьшения opacity в состоянии: hover
Безопасное упрощение
Как и в примере с фотогалереей, который обсуждался ранее в этой главе, брызги CSS3, которые мы добавляем в этом примере, никак не затрагивают браузеры, которые пока что не поддерживают эти свойства.
В итоге самое важное, что каждый из этих элементов – ссылка, на которую можно нажать. Все остальное – это расширенное взаимодействие, созданное для тех, кто способен увидеть его.
Еще раз: используйте с умом