Все для веб-дизайнера
Каскадный вывод материала с помощью CSS3
Наверно каждый веб-разработчик сталкивался с проблемой недостатка места на сайте, ведь неохота визуально загромождать сайт. Это приводит к понижению читаемости текста на сайте, да и так сайт в виде мусорки никого не привлекает. В сегодняшнем уроке мы собираемся реализовать каскадное отображение контента посредством CSS3. Ключевой момент заключается в использовании кнопки чекбокса и комбинации псевдо-класса :checked с родственными комбинаторами. Данное решение отлично подойдет для временного скрытия материала.
Стикеры, использованные в демо, были взяты и PSD-файла Sale Stickers, доступного на Vandelay Premier. И так, приступим.
Шаг 1. HTML
Мы разместим элемент article внутри другого элемента article, который будет выше по иерархии. Каждая кнопка чекбокса будет контролировать элемент article, который будет родственным для неё элементом. Все элементы ярлыков будут преобразованы в стрелки в демо, и будут привязаны к соответствующим кнопкам чекбокса.
|
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 50 51 |
<div id="container"> <article class="c-1"> <section> <h2>Pretium</h2> <img src="img/web-badges-5.png" alt="" /> <p>Curabitur at lacus ac velit ornare lobortis.</p> </section> <input id="arrow-1" type="checkbox" name="box-set" /> <article class="c-2"> <section> <h2>Aliquam</h2> <img src="img/web-badges-4.png" alt="" /> <p>Ut varius tincidunt libero. Phasellus dolor.</p> <label for="arrow-1" class="arrow-label-1"></label> </section> <input id="arrow-2" type="checkbox" name="box-set" /> <article class="c-3"> <section> <h2>Laoreet</h2> <img src="img/web-badges-3.png" alt="" /> <p>Phasellus gravida semper nisi. Nullam vel sem.</p> <label for="arrow-1" class="arrow-label-1"></label> <label for="arrow-2" class="arrow-label-2"></label> </section> <input id="arrow-3" type="checkbox" name="box-set" /> <article class="c-4"> <section> <h2>Feugiat</h2> <img src="img/web-badges-2.png" alt="" /> <p>In ac felis quis tortor malesuada pretium.</p> <label for="arrow-1" class="arrow-label-1"></label> <label for="arrow-2" class="arrow-label-2"></label> <label for="arrow-3" class="arrow-label-3"></label> </section> <input id="arrow-4" type="checkbox" name="box-set" /> <article class="c-5"> <section> <h2>Cubilia</h2> <img src="img/web-badges-1.png" alt="" /> <p>Morbi nec metus. Phasellus blandit leo ut odio. </p> <label for="arrow-1" class="arrow-label-1"></label> <label for="arrow-2" class="arrow-label-2"></label> <label for="arrow-3" class="arrow-label-3"></label> <label for="arrow-4" class="arrow-label-4"></label> </section> </article> </article> </article> </article> </article> </div> |
Article c-5 не требует кнопки чекбокса внутри него.
Шаг 2. CSS
Для начала, мы зададим всем элементам article фон, чтобы они напоминали нам бумагу.
|
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 |
#container { width: 770px; margin: 100px auto 0; } article { background: url(../img/paper.png); position: absolute; top: 0; left: 0; width: 130px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2); box-shadow: 1px 1px 3px rgba(0,0,0,0.2); -webkit-transition: left 0.4s ease-out; -moz-transition: left 0.4s ease-out; -o-transition: left 0.4s ease-out; -ms-transition: left 0.4s ease-out; transition: left 0.4s ease-out; } .c-1 { position: relative; } |
Далее мы добавим некоторый контент в элементы article: заголовки, стикеры. 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 |
section h2 { margin: 0; font-size: 20px; line-height: 30px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } section img { display: block; margin: 0 0 0 -10px; } section p { margin: 0; padding: 8px; font-size: 15px; line-height: 1.4; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } |
Мы выставим разные цвета текста для заголовков и paragraph’ов с разными стикерами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.c-5 > section > h2, .c-5 > section > p { color: #522727; } .c-4 > section > h2, .c-4 > section > p { color: #350850; } .c-3 > section > h2, .c-3 > section > p { color: #1c4a23; } .c-2 > section > h2, .c-2 > section > p { color: #143a49; } .c-1 > section > h2, .c-1 > section > p { color: #3b2348; } |
Прячем элементы ввода из виду:
|
1 2 3 4 5 6 7 8 9 10 |
input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } |
Элементы article не будут складываться или раскрываться при выделении или снятия выделения с кнопок чекбоксов.
|
1 2 3 4 5 6 7 8 9 |
input:checked + article { left: 160px; -webkit-transition: left 0.4s ease-in; -moz-transition: left 0.4s ease-in; -o-transition: left 0.4s ease-in; -ms-transition: left 0.4s ease-in; transition: left 0.4s ease-in; } |
Стили стрелок при снятом выделении с кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
label { background: url(../img/arrow-right.png); position: absolute; top: 170px; right: 10px; width: 11px; height: 17px; cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; -ms-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } |
Стили стрелок при наведении:
|
1 2 3 4 5 6 7 8 9 10 11 |
section:hover label { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; -ms-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } |
Стили стрелок при выделенном состоянии кнопок:
|
1 2 3 4 5 6 7 |
input#arrow-4:checked + article label:nth-of-type(4), input#arrow-3:checked + article label:nth-of-type(3), input#arrow-2:checked + article label:nth-of-type(2), input#arrow-1:checked + article label:nth-of-type(1) { background: url(../img/arrow-left.png); left: 10px; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 13.07.2012 в 21:10, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
