Каскадный вывод материала с помощью CSS3

Наверно каждый веб-разработчик сталкивался с проблемой недостатка места на сайте, ведь неохота визуально загромождать сайт. Это приводит к понижению читаемости текста на сайте, да и так сайт в виде мусорки никого не привлекает. В сегодняшнем уроке мы собираемся реализовать каскадное отображение контента посредством CSS3. Ключевой момент заключается в использовании кнопки чекбокса и комбинации псевдо-класса :checked с родственными комбинаторами. Данное решение отлично подойдет для временного скрытия материала.

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

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

Шаг 1. 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>

<h2>Pretium</h2>

<p>Curabitur at lacus ac velit ornare lobortis.</p>

</section>

<h2>Aliquam</h2>

<p>Ut varius tincidunt libero. Phasellus dolor.</p>

</section>

<h2>Laoreet</h2>

<p>Phasellus gravida semper nisi. Nullam vel sem.</p>

</section>

<h2>Feugiat</h2>

<p>In ac felis quis tortor malesuada pretium.</p>

</section>

<h2>Cubilia</h2>

<p>Morbi nec metus. Phasellus blandit leo ut odio. </p>

</section>

</article>

</div>

Article c-5 не требует кнопки чекбокса внутри него.

Шаг 2. 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;
}

#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-код:

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

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

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

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

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

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

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

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;

}

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Каскадный вывод материала с помощью CSS3

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

Каскадный вывод материала с помощью CSS3

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи