CSS фильтры изображений

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

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

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

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

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

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

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

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

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

Так как у нас все наши элементы находятся на одном уровне, мы используем обобщенный родственный комбинатор (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 , которые будут делать всю работу:

Ff-container input{
display : none ;
}

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

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

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

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

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

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

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,



opacity: 1 ;
}

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

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

opacity: 0.1 ;
}

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

display : none ;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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 поведение не то, которое ожидалось (при наведении на label анимация срабатывает еще раз), но все работает в Авроре 11.0a2, так что может быть это баг браузера.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

Но еще HTML поддерживает работу с Фильтрами . Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры , некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.

Например мы хотим выделить фразу: "Доброго времени суток!!! " Давайте попробуем поизвращать эту фразу:-) , применяя к ней различные фильтры.

Фильтр Mask.

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

Синтаксис фильтра: STYLE="filter:Mask(Color="Color")

Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.

Листинг 19.1.

Фильтр DropShadow.

Добавляет тень к тексту.

Синтаксис фильтра:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)

Листинг 19.3.

Вот как это смотрится web-странице:

Фильтр FlipV.

Переворачивает текст вертикально.

Синтаксис фильтра: STYLE="filter:FlipV"

Листинг 19.5.

Вот как это смотрится web-странице:

Фильтр Wave.

Делает текст волнистым.

Синтаксис фильтра: STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн

Листинг 19.7.

Вот как это смотрится web-странице:

Фильтр Blur.

Размывает текст в определенную сторону.

Синтаксис фильтра:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия