—»     —»   Разрабатываем фильтры на CSS3
  Раздел: Руководства, CSS/Style Sheets   Комментариев: 6  

Разрабатываем фильтры на CSS3

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

Разрабатываем фильтры на CSS3

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

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

Верстка

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

<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="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<!-- ... -->
</li>
<li class="ff-item-type-3">
<!-- ... -->
</li>
<!-- ... -->
</ul>

</section>

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

CSS-код

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

Мы не указывали браузерные префиксы, чтобы сократить объем текста, но в архиве все указано так, как нужно.

У контейнера основной секции будет определенная ширина:

.ff-container{
width: 564px;
margin: 10px auto 30px auto;
}

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

.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);
}

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

.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;
}

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

.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;
}

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

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

.ff-container input{
display: none;
}

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

.ff-items{
position: relative;
margin: 0px auto;
padding-top: 20px;
}

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

.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 появлялся из нижней части, что позволит анимировать уровень плотности отображения переходом.

Итак, мы завершили с основной стилизацией. Теперь давайте посмотрим, как мы сможем фильтровать эти элементы посредством стилей.

Пример 1

Разрабатываем фильтры на CSS3

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

.ff-items li{
margin: 0px;
float: left;
opacity: 0;
width: 188px;
height: 148px;
transition: opacity 0.6s ease-in-out;
}

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

.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;
}

Так как у нас по умолчанию выделен тип «all», следовательно, у всех пунктов изначально будет уровень отображения 1.

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

.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;
}

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

.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;
}

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

Пример 2

Разрабатываем фильтры на CSS3

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

.ff-items li{
margin: 0px;
float: left;
width: 188px;
height: 148px;
transition: all 0.6s ease-in-out;
}

.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);
}

Учтите, что здесь мы не включаем «all», как прежде.

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

.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);
}

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

.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;
}

Пример 3

Разрабатываем фильтры на CSS3

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

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

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

.ff-items li{
margin: 0px;
float: left;
height: 148px;
width: 0px;
transform: scale(0,0);
}

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

.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
width: 188px;
transform: scale(1,1);
transition: transform 0.3s linear;
}

Помните, что мы изначально находимся в данном положении, так как у нас по умолчанию выделен класс «all types», но мы также осуществляем переход к данному положению, если на данный момент просматриваем другие типы и возвращаемся обратно к «all types».

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

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

После 0.4 секунды мы сделаем так, чтоб пункты выделенного типа снова будут отображения, посредством анимации scaleUp:

.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); }
}

Учтите, что данный пример является очень экспериментальным, и будет работать только в тех браузерах, где имеется поддержка анимации CSS. В FireFox 9.0.1 метод будет вести себя не совсем подобным образом (при наведении на ярлычки создается впечатление, будто что-то не запускается), но он будет прекрасно работать в Aurora 11.0a2. Так что, вероятно, это какой-то баг.

Демо

Демо 1: Уровень плотности отображения
Демо 2: Масштабирование
Демо 3: Масштабирование и «удаление»

И на этом все! Надеемся, вам понравились наши сегодняшние эксперименты, и вы найдете им применение в собственных проектах!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6002   |   Оставлено комментариев: 6
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 февраля 2012 @ 23:07
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Очень интересная статья по функциям =))


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #2: 22 февраля 2012 @ 05:58
Написал: fleesials — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
**********
Комментарий #3: 22 февраля 2012 @ 07:21
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
fleesials, эт что ещё за спамерские шуточки? belay


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #4: 22 февраля 2012 @ 09:01
Написал: Vect0r — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Жаль, что для IE ниже девятой версии придётся таки ваять костыли. Но в целом отличная штука.

А вот, кстати, показывать пользовательский e-mail не политкорректно! Мне теперь валится спам, адресованный Вам. Будьте добры, скрывайте мыло!!!
Комментарий #5: 22 февраля 2012 @ 10:19
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
fleesials, забанен.
Vect0r, это не от нас зависит. Так устроен движок. Зарегистрируйтесь, тогда ваше мыло нигде не будет светиться...
Комментарий #6: 22 февраля 2012 @ 11:43
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Vect0r, в любом почтовом ящике есть фильтры... настройте спам на удаление и не замарачивайтесь с отправителем, если Вам конечно именно спам приходит...


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031