Выскальзывающие блоки для сайта на CSS3

Вы хотите добавить на свой ресурс различных привлекающих взор пользователей фишек, тогда этот урок вам будет весьма интересный. В данном посте мы рассмотрим как создать выскальзывающие блоки для сайта с помощью трансформаций css. Идея состоит в том, что при наведении на него курсора мыши заголовок будет сменяться более детальной информацией, которая будет привлекать внимание посетителя своей динамикой. В полной красоте решение можно посмотреть в современных браузерах, которые поддерживают трансформации CSS3.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

А в IE блок будет работать как обычная ссылка. Для начала мы рассмотрим построение HTML, как можно заметить, структура достаточно проста и не требует объяснений:

<h5>Над чем я работаю...</h5>

<div>Wufoo - Online строитель форм. Легко поможет справится даже со сложными формами!</div>

</a>

<h5>Книга, которую я пишу...</h5>

<div>"Digging Into WordPress" - Два в одном, книга и блог, которые пишу с Jeff Starr, о платформе №1.</div>

</a>

<h5>Цитаты, которые я собираю...</h5>

<div>"Quotes on Design" - коллекция различных цитат о дизайне. Есть API для интеграции!</div>

</a>

</section>

</div>

По своей сути, каждый блок является ссылкой, в которой размещаются дополнительные элементы с информацией. Все блоки помещаются в один контейнер. Здесь блочные элементы h5 и div внутри строчного элемента a. Для преодоления данного момента служит свойство display: block, которое установлено для ссылки. Теперь рассмотрим внешний вид ссылок:

.slide-up-boxes a {

display: block;

margin: 0 0 20px 0;

background: rgba(215, 215, 215, 0.5);

border: 1px solid #ccc;

height: 65px;

overflow: hidden;

}

.slide-up-boxes h5 {

text-align: center;

height: 65px;

line-height: 65px;

}

Но наш блок показывает оба кадра. Чтобы скрыть кадр элемента div установим для элементаh5 такую же высоту что для ссылки. А самой ссылке добавим свойство overflow: hidden, которое будет скрывать все, что выходит за рамки элемента. Также установим для элементаh5 выравнивание по центру нашего блока — установим для него центрирование по горизонтали и высоту строки, равной высоте блока.

Теперь займемся сменой кадров. Установим для нашего элемента div в блоке высоту и отступы для формирования внешнего вида. А смену кадров будем осуществлять установкой поля с отрицательным значением равным высоте блока для ссылки. Таким образом, первый кадр (элемент h5) будет смещаться за предлы блока и становиться невидимым, а на его место будет подниматься второй кадр (элемент div ).

.slide-up-boxes a:hover h5 {

margin-top: -65px;

}

.slide-up-boxes div {

height: 45px;

padding: 10px;

}

Итак, смена кадров работает. Настал черед сформировать эффектный внешний вид. Для решения задачи воспользуемся трансформациями CSS3.

Для первого кадра плавно трансформироваться будет значение верхнего поля. А второй кадр мы будем немного поворачивать и менять прозрачность, так как повернутый текст немного вылазит снизу.

.slide-up-boxes h5 {

text-align: center;

height: 65px;

line-height: 65px;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

}

.slide-up-boxes a:hover h5 {

margin-top: -65px;

}

.slide-up-boxes div {

height: 45px;

padding: 10px;

opacity: 0;

-webkit-transform: rotate(6deg);

-webkit-transition: all 0.4s linear;

-moz-transform: rotate(6deg);

-moz-transition: all 0.4s linear;

-o-transform: rotate(6deg);

-o-transition: all 0.4s linear;

}

.slide-up-boxes a:hover div {

opacity: 1;

-webkit-transform: rotate(0);

-moz-transform: rotate(0);

-o-transform: rotate(0);

}

Теперь добавим картинки во второй кадр. Воспользуемся селектором для выделения потомков элемента по номеру:

.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }

.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }

.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }

Остается только скрасить внешний вид наших блоков. То есть нужно подобрать цвет фона, размер и начертание шрифта, ширину поле и так далее. Полный код CSS для блоков будет иметь следующий вид: