Выскальзывающие блоки для сайта на CSS3
Вы хотите добавить на свой ресурс различных привлекающих взор пользователей фишек, тогда этот урок вам будет весьма интересный. В данном посте мы рассмотрим как создать выскальзывающие блоки для сайта с помощью трансформаций css. Идея состоит в том, что при наведении на него курсора мыши заголовок будет сменяться более детальной информацией, которая будет привлекать внимание посетителя своей динамикой. В полной красоте решение можно посмотреть в современных браузерах, которые поддерживают трансформации CSS3.
А в IE блок будет работать как обычная ссылка. Для начала мы рассмотрим построение HTML, как можно заметить, структура достаточно проста и не требует объяснений:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="page-wrap"> <section class="slide-up-boxes"> <a href="#" target="_blank"> <h5>Над чем я работаю...</h5> <div>Wufoo - Online строитель форм. Легко поможет справится даже со сложными формами!</div> </a> <a href="# target="_blank"> <h5>Книга, которую я пишу...</h5> <div>"Digging Into WordPress" - Два в одном, книга и блог, которые пишу с Jeff Starr, о платформе №1.</div> </a> <a href="#" target="_blank"> <h5>Цитаты, которые я собираю...</h5> <div>"Quotes on Design" - коллекция различных цитат о дизайне. Есть API для интеграции!</div> </a> </section> </div> |
По своей сути, каждый блок является ссылкой, в которой размещаются дополнительные элементы с информацией. Все блоки помещаются в один контейнер. Здесь блочные элементы h5
и div
внутри строчного элемента a
. Для преодоления данного момента служит свойство display: block,
которое установлено для ссылки. Теперь рассмотрим внешний вид ссылок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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
).
1 2 3 4 5 6 7 8 |
.slide-up-boxes a:hover h5 { margin-top: -65px; } .slide-up-boxes div { height: 45px; padding: 10px; } |
Итак, смена кадров работает. Настал черед сформировать эффектный внешний вид. Для решения задачи воспользуемся трансформациями CSS3.
Для первого кадра плавно трансформироваться будет значение верхнего поля. А второй кадр мы будем немного поворачивать и менять прозрачность, так как повернутый текст немного вылазит снизу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.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); } |
Теперь добавим картинки во второй кадр. Воспользуемся селектором для выделения потомков элемента по номеру:
1 2 3 |
.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 для блоков будет иметь следующий вид:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.slide-up-boxes a { display: block; height: 130px; margin: 0 0 20px 0; background: rgba(215, 215, 215, 0.5); border: 1px solid #ccc; height: 65px; overflow: hidden; } .slide-up-boxes h5 { color: #333; text-align: center; height: 65px; font: italic 18px/65px Georgia, Serif; /* Вертикальное центрирование текста за счет равных высот строки и элемента */ opacity: 1; -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; opacity: 0; } .slide-up-boxes div { position: relative; color: white; font: 12px/15px Georgia, Serif; 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; } |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 17.03.2012 в 16:40, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |