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

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

Шаг 1. HTML

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

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

Шаг 2. CSS

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

Далее мы добавим некоторый контент в элементы article: заголовки, стикеры. CSS-код:

Мы выставим разные цвета текста для заголовков и paragraph’ов с разными стикерами.

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

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

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

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

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

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

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