Фильтры
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% полностью воспроизводит эффект
Эффекты для картинок
Размытие картинки![Размытие картинки Размытие картинки](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcDicggcGUd4tUgizHZWXV8xeVlYMxel1t-JRIf5GHM-Of8TDet-n8YYZGgfKxdipdYbRdeYzrppHDC2Me2gRvpYFob68ZYcqXZhznOpklwg6H0ALYelzjjzuQqAaLf1TQKTx4uvSwEmhSSbQO-Jy_VV5qEdxt2J-BBZNW9iwqqKH7MeXdPfUxux8-0w/w400-h148-rw/Foto-dlya-saita-1837.jpg)
<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>
Картинка после наведения курсора станет чёрно-белой.
![Чёрно-белый эффект Чёрно-белый эффект](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZCi720w9z7E9J8HK19uZH_WTdDSuLjYcVUdjgzReIxzQLx3rxBYR_igmsvm15-AKTo4M0DGxA5vqoXHOM-y2JvW91H3NnBWrxyjH_2TAEJ2MwYJ-OH7WZWUYHY3s54m4hAx_GuNEWa2QcIoX3Ho0KJMc194ltmmDsvQZF22sEQdDTB6lmJL3xCMU3Q/w400-h145-rw/Foto-dlya-saita-1838.jpg)
<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>
![Фильтр смещение цвета Фильтр смещение цвета](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdplwG43sC51X7IuCAHb_GbzxnBRVrHa9PED65_T87PC0yXoBvrexXedc4VQexMQV46R0RpLWVX9MtnQPqHiBfY16XdDBP4JgkqajdrXj7Y3h51HGZRhyprv3l3X6Ghwfz2C31BYm0oGRZvFtOk5jDOzKN5O4HCnDRYC340Ix5jpvHRZyT4RWGdEn3A/w400-h141-rw/Foto-dlya-saita-1839.jpg)
<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>
Легкое поднятие картинки и тень
Это не фильтр, но мне понравился эффект.
![Легкое поднятие картинки и тень Легкое поднятие картинки и тень](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkvlO7VIHkuazMGRPP0DE1SYQs-eRfQWBfQTKxxZCc76AJkaC-90cC96i8VAGnP81vMlY3llRfQq3artjpOq-THPjPju5dE-PMuywnJ2Wyin5IJycItni0nxZ_uVgmIP_s5tQuItrzCsIjj_SIDrn4A5qYymgw3pj0ded62PrQkYsGFL9zLJ3jahqwA/w400-h141-rw/Foto-dlya-saita-1841.jpg)
<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>
Эффект — фильтр сепия
![фильтр сепия фильтр сепия](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9YcYJhZGJBEMmhmGAwAcPwVxikpvp-9ubZfxbuoPUtxHtVDkBPjT9wtVymGk_vS_4sRA_j6wDRaBB-YxxbvPOftjy_-37FjkD4Lp-6dP5TAIShJUMlt4DUMS3qpKYyj0mUl5_dgYMSJ3dD1utsgMWIeJbV85n6JNCUCavc-Ir9V3NoVIUZ2eJBeniw/w400-h140-rw/Foto-dlya-saita-1842.jpg)
<img src="адрес картинки" alt="описание" class="sepia">
<style>img.sepia:hover {
transition:0.7s all;
filter: sepia(0.5);
-webkit-filter: sepia(0.5);
}</style>
Яркость
При наведении курсора, картинка становится ярче.
![Яркость Яркость](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXaYGA6n4CSIlolgZRXHWH_qipecwvCAAyJg10iixuN2KDqyGZ2ZeDspa8Ybb4B5ahcSMhDdZ9QwBBd975-b8zJFId0_yPEIhjc7-jyAIkhwP3oj1uxoU7xQOQ_3WV4lGpNmk4BCmPy3OnBOYQTKG5GYX3g4JcT3KveBCl2NUntysljEeZglxm-I2gA/w400-h134-rw/Foto-dlya-saita-1844.jpg)
<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>
Контрастность картинки
С помощью этого фильтра изменяется контрастность изображения.
![Контрастность картинки Контрастность картинки](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir6pPJdfNtN19DBNc0Ky26rqsyJTFMJSqTJ66Jix8P-biMs07njHY2fSHPOQ_Bf3Q1eiw8OzddoWss9CxrS9T5Tz4ttL4apzccja2F7Ff-D5VhDANJwv0wbNZpxTWlweg7Mo7m5lxWDXRGzbWMfDvH2rfSPEj4ddurcKtUR1Xqj_Wbciszpu0AZETyyQ/w400-h135-rw/Foto-dlya-saita-1845.jpg)
<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>
Инверсия
![Инверсия Инверсия](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsDTMp5SObpUGofzsFxD3eP2C6bNj3axY-wbx5VF2sKoLEvyEF5xD3PpQ0PLQVlDsm0CUyT2URJwWcEylIgDJhoxibjPJvLXmpyQGwHYyTZUxXlRncf3GhYZ4ZJzdcf2eg__-ACxd5iGCLYxTKoeYBcTqEDcPDocRq1cWgjmV3Br5qSg9_DbeoflDWg/w400-h141-rw/Foto-dlya-saita-1846.jpg)
<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>
![Прозрачность картинки Прозрачность картинки](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzk4pIctm6l-Ukaus5xDVNFZL37CpbKpu1Cr_fqshY4ufYH3LaVHkwBceDpKYsmtkttp9lz3Ajp2xaSyZMFlDVhol6xyCJzW1C_7PjxrfwSrzpZpKmMVyDgrMZWbTH-kpX01UY7n6XIhiRhOYUoWQBwp3EBlX5sEL0Tcd4xzFcyUqsTaxzXQCOk2j3Sw/w400-h141-rw/Foto-dlya-saita-1847.jpg)
<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>
Насыщенность цвета на картинке
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkt0REjpeqKiBpe1gRbYOfieJ6ybu82lNar724GA1xIs-p4xfsXGDnmW0oh03DPPLJ_ohgJLEHOVgYXdwVQlaRCxYk4AcBfZuIDT5KHjUsVQgFG1vVSSNG0_NJRtqJOVZ-lrijvrge3OoZS8inYOzPBCI2Ud_JHy97erQhtS74hVq6_sW5gZReD5JFnQ/s280-rw/Foto-dlya-saita-1848.jpg)
<img alt="описание картинки" class="saturate" src="ваша картинка" />Хотелось бы сказать, что эффекты и фильтры можно использовать вместе и по раздельности. На сайте https://codepen.io/SitePoint/pen/KrXybm нашла замечательную картинку, оформленную фильтрами. На картинке используется изменение яркости и контрастности, так же добавлен эффект сепия. Очень красиво смотрится! И сложно поверить что сделана картинка из фильтров, анимации на css.
<style>img.saturate:hover {
transition:0.7s all;
filter: saturate(200%);
-webkit-filter: saturate(200%);
}</style>
![картинка из фильтров, анимации на css картинка из фильтров, анимации на css](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZy5GuMgqOTSY7XgJHyBhqcuByreosUjUHcZ6fjhDAGbUv87WNEzyH2l8eliXQny3tWemEpRyJFwQUjSVgN727KoDHwZxxYloQFCsTd6jLzlNhPkzpTkpF9Dy8DZkOwaR6psckGyvOToPCkkXtVSAJW1FFDgxXyJ1cftU9Kw28Ox6A1N10ROzHPWeyVg/w242-h320-rw/Foto-dlya-saita-1849.jpg)
Генераторы фильтров
- 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/
Комментарии со спамом удаляются.