Недавно я работал над одним из сайтов своего постоянного клиента и получил задание сделать какой-нибудь красивый эффект при наведении курсора мыши на рекламные объявления.
Первой моей мыслью было использовать CSS-спрайты, однако они требуют работы непосредственно с кодом CSS, что в данном случае не является подходящим решением, поскольку заказчик не обладает необходимыми специальными знаниями.
В идеале решение было бы таково: через панель администратора заказчик устанавливает ссылку на рекламируемый сайт и загружает картинку для баннера, а все дальнейшие изменения происходят незаметно для заказчика.
Какие минусы ожидают нас при использовании CSS спрайтов в дайнной задаче?
- CSS спрайты требуют базовых знаний CSS, а клиент, не знакомый с ними, может испортить весь сайт.
- Чем больше баннеров нужно разместить, тем больше CSS классов требуется создать. Если у вас на странице 20 баннеров, то вам необходимо создать 20 классов – по-моему это будет уже перебор).
На самом деле решение этого вопроса достаточно просто, и ниже я покажу его вам:
HTML
Разметка будет достаточно простой – только те элементы, которые нам действительно нужны: изображения (img), ссылки (a) и контейнер для всего этого (div).
|
1 2 3 4 5 |
<div class="affiliates">
<a href="#"><img src="rokkan.gif" alt="" /></a>
<a href="#"><img src="1md.gif" alt="" /></a>
<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div> |
CSS
Также, как и при использовании обычных CSS спрайтов мы зададим точную высоту и ширину наших спрайтов. Добавление CSS-свойства overflow:hidden позволит нам обрезать лишнюю часть изображения, которую мы не хотим показывать.
Для того, чтобы показать эффект при наведении на баннер, мы всего лишь навсего установим свойство margin-top (верхняя граница элемента) равное высоте нашей видимой области, но со знаком минус.
|
1 2 3 4 5 6 7 8 9 10 11 |
.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
}
.affiliates a:hover img {
margin-top: -182px;
} |
Итак, если вы все сделали правильно, у вас должно получиться вот что:
 |
 |
Дополнительные возможности – эффекты переходов CSS3
Учтите, что CSS3-переходы доступны только в таких браузерах, как Google Chrome, Apple Safari и Opera. Они будут также доступны в Internet Explorer 9 и Mozilla Firefox 4.
HTML
Наша разметка не претерпит каких-либо изменений:
|
1 2 3 4 5 |
<div class="affiliates">
<a href="#"><img src="rokkan.gif" alt="" /></a>
<a href="#"><img src="1md.gif" alt="" /></a>
<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div> |
CSS
Здесь изменения будут также минимальны – просто к селекту “.affilates img” добавится пара строк:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
margin: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
margin-top: -182px;
} |
А получится у нас вот что (учтите, что не любой браузер поддерживает такие эффекты):
|
|
|
Как это работает и какие браузеры поддерживаются?
На данный момент поддерживается Chrome, Opera и Safari. Firefox 4 и Internet Explorer 9 также будут поддерживать данную технологию.
Обратите внимание на строки:
|
1 2 3 |
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out; |
Первая часть в строке (-webkit-transition, -moz-transition, -o-transition) обозначает эффект перехода,
вторую же часть строки мы разберем еще сильнее:
all – свойство перехода (задает то, какое свойство включает анимацию),
0.2s – длительность эффекта (тут все понятно),
ease-in-out – задает функцию (то, какая именно анимация будет происходить).
