Главная > Руководства, CSS/Style Sheets > Каскадный контент посредством CSS3

Каскадный контент посредством CSS3


13 июля 2012, 14:05. Разместил: Design FactoRy
Сегодня мы собираемся реализовать каскадное отображение контента посредством CSS3. Ключевой момент заключается в использовании кнопки чекбокса и комбинации псевдо-класса :checked с родственными комбинаторами.

Каскадный контент посредством CSS3

Стикеры, использованные в демо, были взяты и PSD-файла Sale Stickers, доступного на Vandelay Premier.

Каскадный контент посредством CSS3

Пожалуйста, учтите, что параметры CSS3 будут работать только в тех браузерах, где имеется соответствующая поддержка.

Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


HTML

Мы разместим элемент article внутри другого элемента article, который будет выше по иерархии. Каждая кнопка чекбокса будет контролировать элемент article, который будет родственным для неё элементом. Все элементы ярлыков будут преобразованы в стрелки в демо, и будут привязаны к соответствующим кнопкам чекбокса.

<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 не требует кнопки чекбокса внутри него.

CSS-код

Для начала, мы зададим всем элементам article фон, чтобы они напоминали нам бумагу.

#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: заголовки, стикеры и paragraph’ы. CSS-код:

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’ов с разными стикерами.

.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;
}

Прячем элементы ввода из виду:

input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

Элементы article не будут складываться или раскрываться при выделении или снятия выделения с кнопок чекбоксов.

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;
}

Стили стрелок при снятом выделении с кнопок:

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;
}

Стили стрелок при наведении:

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;
}

Стили стрелок при выделенном состоянии кнопок:

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;
}

На этом всё! Надеемся, что вам понравился данный урок!
Вернуться назад