—»     —»   Каскадный контент посредством CSS3
  Раздел: Руководства, CSS/Style Sheets   Комментариев: 2  

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



Сегодня мы собираемся реализовать каскадное отображение контента посредством 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;
}

На этом всё! Надеемся, что вам понравился данный урок!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8277   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 13 июля 2012 @ 14:15
Написал: Евгений — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Крутой урок, за это спасибо.
Но вот не могу понять где может пригодится такая штука?
Комментарий #2: 13 июля 2012 @ 14:19
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Евгений, может пригодиться, например, для предоставления возможных опций чего-либо, в прайс-листе, для профиля пользователя ... да много чего можно придумать. Для фомы авторизации можно использовать ...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Труба стальная электросварная прямошовная
Трубы из нержавеющей стали. Контроль качества. Доставка. Заказывайте на
steel-ex.ru
Деньги под птс
Автоломбард! Деньги на бизнес! Займ под ПТС! Выдача в день обращения
golfstreamcredit.ru
Arca
Запорная арматура и комплектующие Arca Regler. Низкие цены
arca.moscow
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930