Фильтры CSS и ховер эффекты

В прошлой статье я показала несколько кодов с ховер эффектами на css для картинок. Сегодня немного расскажу о фильтрах. Фильтры css - это те же фильтры, что и в графических редакторах. Фотографии и рисунки с фильтрами можно добавить в статью в редакторе блога, в режиме хтмл или в гаджеты. Так же можно применить эффекты к оформлению внешнего вида блога. Фильтры можно применять как с ховер эффектом, так и без него. Применение фильтров сss притормаживает загрузку сайта.

Фильтры

blur - размытие по Гауссу. Чем больше значение радиуса, тем больше размытие.
brightness - яркость изображения. Чем больше значение, тем ярче изображение.
contrast - контрастность изображения. Значение задается в % или в десятичных дробях.
drop-shadow - тень.
grayscale - черно-белое изображение. Чем больше значение, тем сильнее эффект.
hue-rotate - меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге.
invert - негатив изображения. Значение задается в %. 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity - добавляет прозрачность элементу. Значение задается только в %, 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate - насыщенность цвета. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в %, так и целым числом, 1 эквивалентно 100%.
sepia - эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект

Эффекты для картинок

Размытие картинки

<div class="blur pic">
<img alt="описание картинки" src="ваша картинка" /></div>
<style>.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}</style>

Чёрно-белый эффект

Картинка после наведения курсора станет чёрно-белой.

<div class="bw pic">
<img alt="описание картинки" src="ваша картинка" /></div>
<style>.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}</style>

Фильтр смещение цвета

<img alt="описание картинки" class="hue-rotate" height="281" src="ваша картинка" width="400" />
<style>img.hue-rotate:hover {
transition:0.7s all;
filter: hue-rotate(270deg);
-webkit-filter: hue-rotate(270deg);
}</style>

Размер картинки выделен фиолетовым.

Легкое поднятие картинки и тень
Это не фильтр, но мне понравился эффект.

<img alt="описание картинки" class="drop-shadow" height="283" src="ваша картинка" width="400" />
<style>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;
}</style>

Размеры картинки выделены в коде салатовым, меняйте их на свои.

Эффект — фильтр сепия

<img src="адрес картинки" alt="описание" class="sepia">
<style>img.sepia:hover {
transition:0.7s all;
filter: sepia(0.5);
-webkit-filter: sepia(0.5);
}</style>

Яркость

При наведении курсора, картинка становится ярче.

<img alt="описание картинки" class="brightness" height="270" src="ваша картинка" width="400" />
<style>img.brightness:hover {
transition:0.7s all;
filter: brightness(1.5);
-webkit-filter: brightness(1.5);
}</style>

Ширина и высота картинки выделены в коде красным.

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

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

<img alt="описание" class="contrast" height="270" src="адрес картинки" width="400" />
<style>img.contrast:hover {
transition:0.7s all;
filter: contrast(1.5);
-webkit-filter: contrast(1.5);
}</style>

Оранжевым в коде выделила размер.

Инверсия

<img alt="описание картинки" class="invert" height="283" src="ваша картинка" width="400" />
<style>img.invert:hover {
transition:0.7s all;
filter: invert(100%);
-webkit-filter: invert(100%);
}</style>

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

<img alt="описание картинки" class="opacity" height="282" src="картинка" width="400" />
<style>
img.opacity:hover {
transition:0.7s all;
filter: opacity(0.2);
-webkit-filter: opacity(0.2);
}
</style>

Ширину и высоту картинки в коде выделила красным.

Насыщенность цвета на картинке

<img alt="описание картинки" class="saturate" src="ваша картинка" />
<style>img.saturate:hover {
transition:0.7s all;
filter: saturate(200%);
-webkit-filter: saturate(200%);
}</style>

Хотелось бы сказать, что эффекты и фильтры можно использовать вместе и по раздельности. На сайте https://codepen.io/SitePoint/pen/KrXybm нашла замечательную картинку, оформленную фильтрами. На картинке используется изменение яркости и контрастности, так же добавлен эффект сепия. Очень красиво смотрится! И сложно поверить что сделана картинка из фильтров, анимации на css.

Не все эффекты показанные в статье работают на планшетах и телефонах.

Генераторы фильтров

https://www.cssfilters.co/
https://cssgenerator.org/filter-css-generator.html
https://www.cssfiltergenerator.com/
https://atlogex.com/css-online-filter-image-generate/
https://cssportal.com/css-image-filter-generator/
http://doodlenerd.com/css-effect/css-filter-generator
https://webcode.tools/css-generator/blur (много генераторов на одном сайте)
https://www.bestagencies.com/tools/filter-effects-css-generator/
https://ilyashubin.github.io/FilterBlend/
http://blog.mojtabaseyedi.com/css-filters/
http://ds-overdesign.com/filter/