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

Рис. 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 изменяется, общий переход будет сглаживать это изменение и кошка будет выглядеть так, будто бы она скользит из стороны в сторону.