Фильтрация изображений с помощью технологий CSS3!
↓ Также Вам будет интересно ↓
При создании галереи изображений, возникает соответственно потребность в их сортировке, для удобства пользователя. И сегодня мы будет создавать эффект – фильтрация изображений на CSS3. Используя псевдо-класс :checked
, мы можем создать переключение состояния элементов с помощью чекбокса или радио кнопки.
В этом уроке мы будем изучать эти css3 эффекты, создав экспериментальный фильтр изображений для портфолио, или просто галереи, который будет сортировать заданные нами элементы.
Идея принадлежит автору Роману Комарову и его эксперимент
HTML структура
Наша цель заключается в том, чтобы создать четыре кнопки, которые при нажатии будут активировать сортировку по заданным параметрам. Таким образом, для них мы будем использовать радио-кнопки, все они имеют одинаковые имена, так как принадлежат к одной группе (здесь только один можем иметь состояние checked
).
По умолчанию, мы хотим, чтобы “все” радио-кнопки были в состоянии активности и были показаны все картинки. Мы добавим несколько этикеток label
для переключателей. Нажатие на label
активирует радио кнопку (на которую нажал пользователь) с соответствующим ID:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<section class="ff-container"> <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" /> <label for="select-type-all" class="ff-label-type-all">All</label> <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" /> <label for="select-type-1" class="ff-label-type-1">Web Design</label> <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" /> <label for="select-type-2" class="ff-label-type-2">Illustration</label> <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" /> <label for="select-type-3" class="ff-label-type-3">Icon Design</label> <div class="clr"></div> <ul class="ff-items"> <li class="ff-item-type-1"> <a href="#"> <span>Chameleon</span> <img src="/web-developer/css/images/1.jpg" /> </a> </li> <li class="ff-item-type-2"> <!-- ... --> </li> <li class="ff-item-type-3"> <!-- ... --> </li> <!-- ... --> </ul> </section> |
Маркированный список ul
будет содержать все элементы портфолио изображений – ссылку, саму картинку и тег span
. Каждый элемент списка будет иметь специальный класс, который позволит определить куда фильтровать его, когда мы щелкаем на одну из кнопок.
CSS стили
Мы будем создавать три эффекта сортировки контента, но сначала давайте рассмотрим общие стили. Весь блок с контентом будет иметь определенную ширину:
1 2 3 4 |
.ff-container{ width: 564px; margin: 10px auto 30px auto; } |
Этикетки label
закроют радио-кнопки и мы дадим им солидный градиент и некоторые тонкости в тени:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.ff-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; width: 25%; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); float:left; box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2); } |
На углах мы хотим сделать закругленные края, поэтому первая кнопка и последняя получат определенный радиус скругления:
1 2 3 4 5 6 |
.ff-container label.ff-label-type-all{ border-radius: 3px 0px 0px 3px; } .ff-container label.ff-label-type-3{ border-radius: 0px 3px 3px 0px; } |
Для каждой активной кнопки, мы хотим также задать свои стили в нажатом состоянии:
1 2 3 4 5 6 7 8 9 10 11 |
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all, .ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1, .ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2, .ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{ background: linear-gradient(top, #646d93 0%,#7c87ad 100%); color: #424d71; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset; } |
Так как у нас все наши элементы находятся на одном уровне, мы используем общий брат комбинатор, который представлен как “тильда” (~), чтобы достичь соответствующего label
. С этим «трюком» мы также добавим другие возможности.
Поля input
могут быть скрыты, так как у нас есть метки label
, которые сделают свою работу:
1 2 3 |
.ff-container input{ display: none; } |
Теперь перейдем к элементам списка.
1 2 3 4 5 |
.ff-items{ position: relative; margin: 0px auto; padding-top: 20px; } |
Ссылка и тег span
имеют следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.ff-items a{ display: block; position: relative; padding: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 4px; width: 160px; height: 120px; } .ff-items a span{ display: block; background: rgba(113,123,161, 0.9); font-style: italic; color: #fff; font-weight: bold; padding: 20px; position: absolute; bottom: 10px; left: 10px; width: 120px; height: 0px; overflow: hidden; opacity: 0; text-align: center; text-shadow: 1px 1px 1px #303857; transition: all 0.3s ease-in-out; } .ff-items a:hover span{ height: 80px; opacity: 1; } .ff-items li img{ display: block; } |
При наведении на ссылку снизу появится текст (тег span
). Это оживит изображения и придаст красивый эффект и юзабилити.
Все, это были основные, общие стиле. Как я уже упоминал выше, мы создадим 3 эффекта сортировки. Давайте посмотрим особенности каждого из них!
В первом примере все очень просто, выбранным элементам (т.е. те которые попали в сортировку), мы даем высокую прозрачность. Переход прозрачности делаем плавным:
1 2 3 4 5 6 7 8 |
.ff-items li{ margin: 0px; float: left; opacity: 0; width: 188px; height: 148px; transition: opacity 0.6s ease-in-out; } |
Затем мы будем использовать общий брат комбинатор для элементов, которые выбраны и установим для них прозрачность 0:
1 2 3 4 5 6 |
.ff-container input.ff-selector-type-all:checked ~ .ff-items li, .ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1, .ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2, .ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{ opacity: 1; } |
Поскольку у нас есть кнопка "ВСЕ"
, по умолчанию все элементы будут иметь нулевую прозрачность.
Теперь, все остальные пункты должны получить очень низкую прозрачность, раз мы выбираем другой тип, то есть сортируем по выбранным параметрам. Мы будем использовать селектор :not()
для определения, что список элементов, который не имеют выбранного класса, должны иметь прозрачность 0.1:
1 2 3 4 5 |
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){ opacity: 0.1; } |
Также мы не будем показывать описание при наведении для тех элементов, которые не выбраны и имеют прозрачность 0.1:
1 2 3 4 5 |
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span, .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span, .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{ display: none; } |
И это был первый пример, первый эффект. Давайте посмотрим далее…
В этом примере мы хотим, чтобы выбранные элементы были немного увеличены, в то время как другие уменьшены и стали более прозрачными. Итак, давайте добавим переход к списку элементов:
1 2 3 4 5 6 7 |
.ff-items li{ margin: 0px; float: left; width: 188px; height: 148px; transition: all 0.6s ease-in-out; } |
По умолчанию, все элементы списка имеют обычный масштаб, расположены в обычном порядке и с полной непрозрачностью. При активации фильтрации изображений, мы хотим, чтобы они были немного расширенны и сохранили непрозрачность:
1 2 3 4 5 6 |
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1, .ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2, .ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{ opacity: 1; transform: scale(1.1); } |
Здесь следует отметить, что мы не включили тип "ВСЕ"
, как раньше.
Не выбранные элементы мы будем уменьшать и применять высокий уровень прозрачности:
1 2 3 4 5 6 |
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){ opacity: 0.1; transform: scale(0.5); } |
И снова скрываем описание при наведении для не выбранных картинок:
1 2 3 4 5 |
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span, .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span, .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{ display:none; } |
Это был второй эффект, но у нас есть ещё один! Смотрим…
Последний пример – это всего лишь эксперимент. Мы хотим сделать что-то немного сложнее: при выборе типа сортировки, мы хотим масштабировать все элементы “внутрь”, а затем снова масштабировать только те элементы, которые были выбраны.
Другие изображения исчезают, и так как мы не можем анимировать свойство отображения (даже с некоторой комбинацией непрозрачности), мы используем маленькую хитрость: после масштабирования пунктов “внутрь”, мы также делаем анимацию ширины тех, которые должны появиться.
Так что, давайте дадим для элементов списка изначально ширину 0 и масштабировать scale
до 0 (внимание: возможна некорректная работа в старых браузерах):
1 2 3 4 5 6 7 |
.ff-items li{ margin: 0px; float: left; height: 148px; width: 0px; transform: scale(0,0); } |
Когда выбрано "ВСЕ"
, мы имеем масштаб 1, а ширину 188px:
1 2 3 4 5 |
.ff-container input.ff-selector-type-all:checked ~ .ff-items li{ width: 188px; transform: scale(1,1); transition: transform 0.3s linear; } |
Помните, мы в этом состоянии на начальном этапе, так как у нас по умолчанию установлен флажок "ВСЕ"
, но мы также создадим переход, если в настоящее время просматривается другой тип сортировки, и возвращается к "ВСЕ"
.
В это время, элементы, которые не выбраны (те, что мы получаем с помощью селектора :not()
) будут иметь scaleDown
анимацию, которая будет масштабировать их и даст ширину 0.
Через 0,4 секунд, мы показываем выбранные элементы с эффектом анимации, за счет масштаба:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1, .ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2, .ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3 { transition: transform 0.3s linear, width 0s linear 0.3s; animation: scaleUp 0.3s linear 0.4s forwards; } .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) { animation: scaleDown 0.3s linear forwards; } @keyframes scaleUp { 50% { width: 188px; transform: scale(0,0); } 100% { width: 188px; transform: scale(1,1); } } @keyframes scaleDown { 0% { width: 188px; transform: scale(1,1);} 99% { width: 188px; transform: scale(0,0);} 100% { width: 0px; transform: scale(0,0); } } |
Заключение
Итак, вот что мы имеем на выходе:
И вот оно! Я надеюсь, вам понравился этот урок и нашли для себя вдохновение!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко