Webmasters.BY

Используя псевдо-класс :checked, можно переключать состояния таких элементов, как checkbox или radio-кнопки. На этом уроке мы будем изучать это свойство CSS3, создав экспериментальный фильтр для портфолио, который будет переключать состояния элементов определенного типа.

На этот урок меня вдохновил блестящей эксперимент Романа Комарова "Фильтрация элементов без JS", в котором он использует флажки и переключатели для фильтрации цветных форм.

HTML-разметка

Давайте начнем с разметки. Наша цель создать четыре кнопки-фильтра, после нажатия на которые, соответствующие элементы портфолио будут появляются или исчезать. Итак, мы будем использовать несколько переключателей, все они имеют одинаковое имя, так как они должны принадлежать к одной группе (поэтому только один переключатель будет иметь состояние "checked" ). По умолчанию, мы хотим, чтобы все переключатели были выбраны или отмечены. Мы добавим несколько тегов label для радио-кнопок, которые мы будем использовать, чтобы скрыть переключатели. Нажатие на label выберет радио кнопку с соответствующими id:

Неупорядоченный список будет содержать все элементы портфолио, с ссылками на изображения. Каждый элемент списка будет иметь класс, на основе которого и будет производится фильтрация элементов, когда мы нажмем одну из радио-кнопок.

CSS

Мы создадим три примера этого эффекта, но сначала давайте посмотрим на общие стили.

Я опускаю все префиксы браузеров, но вы можете найти их в исходниках.

Основной контейнер будет иметь фиксированную ширину:

Теги label будут скрывать радио-кнопки и мы зададим им градиент и небольшие тонкие тени:

Для первого и последнего тега label мы создадим закругленные уголки:

Для каждой отмеченной радио-кнопки, мы создадим стили имитирующие эффект "нажатия":

Так как у нас все наши элементы находятся на одном уровне, мы используем обобщенный родственный комбинатор (the general sibling combinator), который обозначается символом "тильда" (~). Селектор в ввиде input.ff-selector-type-3:checked ~ label.ff-label-type-3 значит, что элемент input.ff-selector-type-3:checked следует за элементом label.ff-label-type-3 в иерархии документа, исключая различные комментарии и т.п., и они обязательно имеют одного родителя. Этот «трюк» нам также позволит получить различные типы элементов в портфолио.

Элементы input могут быть скрыты, поскольку у нас есть label, которые будут делать всю работу:

Теперь давайте перейдем к элементам списка:

Ссылки и элементы span будeт иметь следующие стили:

Когда мы наводим курсор мыши на ссылку, span будет появляются снизу, изменяя свою прозрачность.

Вот и все "общие" стили. Теперь давайте посмотрим стили для фильтрации элементов!

Пример 1

В первом примере мы сделаем, чтобы выбранные элементы (т.е. когда соответствующую кнопку радио "отметили") имели самую высокую яркость.

Мы добавим transition к элементу списка для создания непрозрачности:

Затем мы будем использовать обобщенный родственный комбинатор, чтобы установить непрозрачность для соответствующих пунктов:

Так как у нас все радио-кнопки изначально отмечены, то все элементы будут изначально имеют непрозрачность равную 1.

Теперь, мы будем использовать селектор :not(), чтобы указать список элементов, которые не имеют выбранного класса и должны иметь прозрачность 0.1:

Описания для этих элементов списка не должны показываться при наведении:

Это был первый пример. Давайте взглянем на следующий.

Пример 2

В этом примере мы сделаем выбранные элементы увеличенными, в то время как другие уменьшим и сделаем более прозрачными. Итак, давайте добавим transition к элементам списка:

По умолчанию, мы будем иметь все элементы списка нормального размера и с полной непрозрачностью. Когда выбираем один тип, мы хотим, чтобы эти пункты увеличились и также остались полностью непрозрачными:

Другие элементы портфолио мы будем уменьшать и применять к ним низкий уровень прозрачности:

И мы опять будем скрывать описание для элементов, которые не выбраны:

Пример 3

Последний пример всего лишь эксперимент. Мы хотим сделать что-то немного более сложное здесь: при выборе типа, мы хотим масштабировать все элементы, уменьшив их, а затем увеличить только элементы с выбранным типом.

Мы хотим, чтобы невыбранные элементы исчезли, но так как мы не можем анимировать свойство display, мы используем одну маленькую хитрость: когда мы будем уменьшать элементы, мы изменим ширину и сделаем её равной 0.

Итак, давайте зададим изначально ширину списка равную 0:

Когда выбран пункт "all", мы изменим масштаб равный 1 и ширину установим равную 188px:

Помните,  что это состояние на начальном этапе, так как у нас "all" отмечено по умолчанию.

Теперь, когда мы отмечаем один определенной тип, элементы с этим типом класса будут сначала исчезать вместе с остальными элементами, а затем появляться снова.

Обратите внимание, что этот пример экспериментальный и он будет корректно работать только в браузерах, поддерживающих CSS анимацию. В Firefox 9.0.1 поведение не то, которое ожидалось (при наведении на label анимация срабатывает еще раз), но все работает в Авроре 11.0a2, так что может быть это баг браузера.

Скачать исходники