Когда на сайте множество изображений, то существует потребность организации их в галерею. Хорошо, галерею мы сделали, но если все же необходимо выделить изображения и распределить их на группы. Используя основной  комбинатор и псевдо-класс, мы можем переключать статус других элементов, отмечая чекбокс или радио-кнопку. В данном уроке мы расскажем как сделать данную фильтрацию с помощью СSS3, такой прием отлично подойдет для каждого сайта, в особенности для портфолио или студии.

 
Красивые фотографии из сети Dribbble, использованные в демо, были предоставлены Майком из команды Creative Mints.

Шаг 1. HTML

Давайте начнем с разметки. Итак, мы используем несколько радио-кнопок с одинаковыми именами, так как они должны принадлежать единой группе. По умолчанию нам нужно, чтобы «все» радио-кнопки были отмечены. Мы добавляем к кнопкам заголовки, которые будем использовать для того, чтобы спрятать сами кнопки. Кликом по заголовку будет производиться клик по радио-кнопке с соответствующим ID:

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

Шаг 2.  CSS

Мы рассмотрим три примера с эффектами, но для начала давайте разберемся с основным стилем. Мы не указывали браузерные префиксы, чтобы сократить объем текста, но в архиве все указано так, как нужно. У контейнера основной секции будет определенная ширина:

Заголовки будут покрывать радио-кнопки, и мы зададим им красивый эффект градации, а также небольшую тень блока:

Углы должны быть закруглены, так что, у первого и у последнего заголовка они будет слегка закруглены:

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

Так как все наши элементы располагаются на одном уровне, мы используем основной родственный комбинатор, который представляется в виде тильды (~) для того, чтобы получить соответствующие ярлычки с заголовками. С помощью этого трюка мы также можем получить различные типы в списке портфолио. Поля ввода могут быть скрыты, так как за них всю работу делают ярлычки:

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

Анкор и элемент span будут обозначены следующим стилем:

При наведении на анкор, мы сделаем так, чтобы span появлялся из нижней части, что позволит анимировать уровень плотности отображения переходом. Итак, мы завершили с основной стилизацией. Теперь давайте посмотрим, как мы сможем фильтровать эти элементы посредством стилей.

Пример 1

В первом примере мы просто делаем выделенные пункты (то есть, когда отмечена соответствующая радио-кнопка) максимально видимыми. Давайте добавим переход уровня плотности отображения к пункту списка:

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

Теперь все другие пункты должны получить низкое значение уровня отображения, так как мы выбрали тип, отличный от «all». Мы используем селектор :not() для того, чтобы указать, что элементы списка, которые не обозначены классом выделенного типа, должны получить значение уровня плотности отображения 0.1:

Span с описанием этого списка элементов не должен отображаться при наведении:

И на этом кончается наш первый пример. Давайте перейдем к следующему.

Пример 2

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

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

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

Пример 3

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

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

Итак, давайте изначально зададим пунктам списка ширину 0, а затем уменьшим их до 0 (осторожней со старыми версиями браузеров)

Когда выделен класс «all type», нам нужно будет увеличить элементы до 1, а ширину до 188 пикселей:

Теперь, когда мы кликаем по одному определенному типу, пункты с заданным классом данного типа сначала будут возвращены к их исходному положению – сначала уменьшатся с задержкой в 0.3 секунды, и получат значение ширины равное 0. После 0.4 секунды мы сделаем так, чтоб пункты выделенного типа снова будут отображения, посредством анимации scaleUp:

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

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