Фильтрация изображений с помощью технологий CSS3! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSФильтрация изображений с помощью технологий CSS3!
Дата: 08.06.2013 в 23:06 | Просмотров: 3952

Фильтрация изображений с помощью технологий CSS3!

Фильтрация изображений CSS3!
Скачатьбесплатно с сервера
Демодемонстрация

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

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

Идея принадлежит автору Роману Комарову и его эксперимент “Фильтр элементов без JS”, в котором он использует чекбоксы и радио кнопки для фильтрации цветных фигур. Итак, давайте приступим!

HTML структура

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

По умолчанию, мы хотим, чтобы “все” радио-кнопки были в состоянии активности и были показаны все картинки. Мы добавим несколько этикеток label для переключателей. Нажатие на label активирует радио кнопку (на которую нажал пользователь) с соответствующим ID:

Маркированный список ul будет содержать все элементы портфолио изображений – ссылку, саму картинку и тег span. Каждый элемент списка будет иметь специальный класс, который позволит определить куда фильтровать его, когда мы щелкаем на одну из кнопок.

CSS стили

Мы будем создавать три эффекта сортировки контента, но сначала давайте рассмотрим общие стили. Весь блок с контентом будет иметь определенную ширину:

Этикетки label закроют радио-кнопки и мы дадим им солидный градиент и некоторые тонкости в тени:

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

Для каждой активной кнопки, мы хотим также задать свои стили в нажатом состоянии:

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

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

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

Ссылка и тег span имеют следующие стили:

При наведении на ссылку снизу появится текст (тег span). Это оживит изображения и придаст красивый эффект и юзабилити.

Все, это были основные, общие стиле. Как я уже упоминал выше, мы создадим 3 эффекта сортировки. Давайте посмотрим особенности каждого из них!


Пример 1

Фильтрация изображений на css3

В первом примере все очень просто, выбранным элементам (т.е. те которые попали в сортировку), мы даем высокую прозрачность. Переход прозрачности делаем плавным:

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

Поскольку у нас есть кнопка "ВСЕ", по умолчанию все элементы будут иметь нулевую прозрачность.

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

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

И это был первый пример, первый эффект. Давайте посмотрим далее… ;)


Пример 2

сортировка картинок для портфолио - эффект 2

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

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

Здесь следует отметить, что мы не включили тип "ВСЕ", как раньше.

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

И снова скрываем описание при наведении для не выбранных картинок:

Это был второй эффект, но у нас есть ещё один! Смотрим…


Пример 3

Фильтр изображений CSS3 - эффект 3

Обратите внимание, что этот пример создан как эксперимент и будет корректно работать только в браузерах, поддерживающих CSS анимации.

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

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

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

Когда выбрано "ВСЕ", мы имеем масштаб 1, а ширину 188px:

Помните, мы в этом состоянии на начальном этапе, так как у нас по умолчанию установлен флажок "ВСЕ", но мы также создадим переход, если в настоящее время просматривается другой тип сортировки, и возвращается к "ВСЕ".

В это время, элементы, которые не выбраны (те, что мы получаем с помощью селектора :not()) будут иметь scaleDown анимацию, которая будет масштабировать их и даст ширину 0.

Через 0,4 секунд, мы показываем выбранные элементы с эффектом анимации, за счет масштаба:

Заключение

Итак, вот что мы имеем на выходе:

И вот оно! Я надеюсь, вам понравился этот урок и нашли для себя вдохновение!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


Добавить комментарий