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

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

на обложку

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

Шрифт:

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 показаны обычное и активное состояния картинки. Иллюзия приближающейся газонокосилки закончена.