Фильтры CSS3

С помощью CSS фильтров можно создавать на сайте различные красивые эффекты , и их можно применить к любому элементу сайта

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

Рассмотрим поподробней каждый из фильтров, эффект будет присутствовать при наведении на картинку

В качестве «подопытного» элемента будем использовать одну и ту же картинку, чтобы было возможно сравнить изменения при применении фильтров.

Размытие — blur

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

<img src="img.png" alt="" class="blur">
img.blur:hover {
    transition:0.7s all;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

Поворот цвета — hue-rotate

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

<img src="img.png" alt="" class="hue-rotate">
img.hue-rotate:hover {
    transition:0.7s all;
    filter: hue-rotate(270deg); 
    -webkit-filter: hue-rotate(270deg);
}

Тень — drop-shadow

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

<img src="img.png" alt="" class="drop-shadow">
img.drop-shadow {
    position: relative;
    top: 0; 
    left: 0; 
    transition: 0.25s all;
}
img.drop-shadow:hover {
    transition:0.7s all;
    filter: drop-shadow(5px 5px 10px #111);
    -webkit-filter: drop-shadow(5px 5px 10px #111);
    top: -3px;
    left: -3px;
}

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

Яркость — brightness

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

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

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

<img src="img.png" alt="" class="brightness">
img.brightness:hover {
    transition:0.7s all;
    filter: brightness(1.5); 
    -webkit-filter: brightness(1.5);
}

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

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

<img src="img.png" alt="" class="contrast">
img.contrast:hover {
    transition:0.7s all;
    filter: contrast(1.5); 
    -webkit-filter: contrast(1.5);
}

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

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

<img src="img.png" alt="" class="saturate">
img.saturate:hover {
    transition:0.7s all;
    filter: saturate(200%); 
    -webkit-filter: saturate(200%);
}

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

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

<img src="img.png" alt="" class="opacity">}
img.opacity:hover {
    transition:0.7s all;
    filter: opacity(0.2); 
    -webkit-filter: opacity(0.2);
}

Инверсия — invert

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

<img src="img.png" alt="" class="invert">
img.invert:hover {
    transition:0.7s all;
    filter: invert(100%); 
    -webkit-filter: invert(100%);
}

Сепия — sepia

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

<img src="img.png" alt="" class="sepia">
img.sepia:hover {
    transition:0.7s all;
    filter: sepia(0.5); 
    -webkit-filter: sepia(0.5);
}

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

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

<img src="img.png" alt="" class="grayscale">
img.grayscale:hover {
    transition:0.7s all;
    filter: grayscale(0.7);
    -webkit-filter: grayscale(0.7);
}

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

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

<p>Наведи на меня курсор, и получи результат работы фильтров </p>
p {
    font-size: 22px;
    color:#00FFFF; 
    border: 1px dotted #999;
    padding: 15px;
    margin-bottom: 15px;
    text-shadow: 0px 0px 1px #111;
    position: relative;
    top: 0; 
    left: 0; 
    transition: 0.7s all;
}
p: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;
}

Применение фильтров значительно расширяет возможности веб-разработчиков при оформления сайта. Всем творческих успехов!