С помощью CSS фильтров можно создавать на сайте различные красивые эффекты , и их можно применить к любому элементу сайта. В настоящее время CSS фильтры работают только в Firefox, для работы в других браузерах необходимо применять префиксы. CSS фильтры дают замечательные эффекты сайту, но к сожалению, негативно влияют на его производительность, поэтому не стоит ими злоупотреблять. Рассмотрим поподробней каждый из фильтров, эффект будет присутствовать при наведении на картинку. В качестве “подопытного” элемента будем использовать одну и ту же картинку, чтобы было возможно сравнить изменения при применении фильтров.
Размытие
С помощью этого фильтра создается эффект размытости изображения. Измеряется в пикселях
[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]
Источник