CSS3 для веб-дизайнеров - [16]
>
>
> 
> 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). Достаточно сгладить изменение положения, чтобы космическая кошка выглядела так, будто бы она ускользает от мыши.
