Фильтры CSS3

С помощью CSS фильтров можно создавать на сайте различные красивые эффекты , и их можно применить к любому элементу сайта. В настоящее время CSS фильтры работают только в Firefox, для работы в других браузерах необходимо применять префиксы. CSS фильтры дают замечательные эффекты сайту, но к сожалению, негативно влияют на его производительность, поэтому не стоит ими злоупотреблять. Рассмотрим поподробней каждый из фильтров, эффект будет присутствовать при наведении на картинку. В качестве “подопытного” элемента будем использовать одну и ту же картинку, чтобы было возможно сравнить изменения при применении фильтров.

Размытие

С помощью этого фильтра создается эффект размытости изображения. Измеряется в пикселях
[raw]
[/raw]

img.blur:hover{filter: blur(2px); -webkit-filter: blur(2px);}

Поворот цвета

Для этого фильтра задается смещение цвета по кругу, задается в градусах.

img.hue-rotate:hover{filter: hue-rotate(270deg); -webkit-filter: hue-rotate(270deg);}

Тень

Значения это фильтра задаются также, как и для text-shadow, для более красивого эффекта зададим небольшое смещение картинке

img.drop-shadow {position: relative; top: 0; left: 0; transition: 0.25s all;}
img.drop-shadow:hover{filter: drop-shadow(5px 5px 10px #111);
-webkit-filter: drop-shadow(5px 5px 10px #111);top: -3px; left: -3px;}

Следующие 3 фильтра могут задаваться либо в процентном отношении, либо любым целым или дробным числом.

Яркость

С помощью этого фильтра изменяется яркость элемента.

Значение “0” яркость равна нулю – черный цвет, в диапазоне от “0” до “1” – от черного до нормального. Значение больше “1” элемент становится ярче до полной засветки(белый цвет).




Также значение может выражаться в процентах. 100% – норма, меньше – затемнение, больше – увеличивается яркость.

img.brightness:hover{filter: brightness(1.5); -webkit-filter: brightness(1.5);}

Контрастность

С помощью этого фильтра изменяется контрастность элемента.

img.contrast:hover{filter: contrast(1.5); -webkit-filter: contrast(1.5);}

Насыщенность

При значении “0” – получается черо-белый вариант, при “1” и соответственно 100% – натуральные цвета, а при значениях выше – увеличение насыщенности.

img.saturate:hover{filter: saturate(200%); -webkit-filter: saturate(200%);}

4 фильтра, значения которых ограничиваются.
Диапазон значений от “0” до “1” или 0-100%

Прозрачность

img.opacity:hover{filter: opacity(0.2); -webkit-filter: opacity(0.2);}

Инверсия

При значении 50% – серый фон.

img.invert:hover{filter: invert(100%); -webkit-filter: invert(100%);}

Сепия

Цвет, присущий старым чёрно-белым фотографиям; имитация такой фотографии. Оттенок коричневого цвета.

img.sepia:hover{filter: sepia(0.5); -webkit-filter: sepia(0.5);}

Градации серого

Преобразовывает цветной элемент в черно-белый
[raw]

img.grayscale:hover{filter: grayscale(0.7); -webkit-filter: grayscale(0.7);}

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

Наведи на меня курсор, и получи результат работы фильтров

p.all {font-size: 22px;color:#00FFFF; border: 1px dotted #999;padding: 15px;margin-bottom: 15px;
   text-shadow: 0px 0px 1px #111;}
p.all{position: relative; top: 0; left: 0; transition: 0.7s all;}
p.all:hover{filter: hue-rotate(190deg) drop-shadow(1px 0px 10px #900101);
    -webkit-filter: hue-rotate(190deg) drop-shadow(1px 0px 10px #900101);
   top: 5px; left: 8px; background: #ddd;}

[/raw]
Источник