Всем привет, не будем тянуть и сразу перейдем к делу. Мы рассмотрим два основных аргумента свойства filter которые могут быть очень полезны вам.
Часто бывает так, что у нас на сайте есть разного рода изображения( логотипы, значки и иконки),это могут быть социальные сети, платежные системы и т.п.
И при наведении курсора на одну из картинок ее нужно как то выделить, в большинстве случаев используют смену черно-белой картинки на цветную.
Так вот дорогие друзья, теперь не нужно делать две картинки(цветную и черно-белую) или слайд с двумя изображениями, так как у свойства filter есть замечательное значение, а точнее функция sepia(), которая делает наше изображение черно-белым. И чтобы это проверить загрузите цветное изображение и напишите следующий код:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8"/>
<title>Свойство filter</title>
</head>
<body>
<style>
img{
transition:all 0.3s linear;
cursor:pointer;
filter:sepia();
}
img:hover{
filter:none;
}
</style>
<div>
<img src="yandexMoney.jpg" alt="Yandex money"/>
</div>
</body>
</html>Как видите вначале наше изображение отображается черно-белым цветом, а если мы на него курсором мыши, то оно станет цветным, что придает эффект активации.
Вот так просто, можно избавиться от необходимости делать по две картинки или слайд на одно изображение на сайте. Надеюсь вы оценили данное свойство и будете его использовать.
Надо сказать что это далеко не единственное значение или функция которую может применять свойство filter. Мы рассмотрим еще одно значение blur(), это как вы уже догадались размытие .
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8"/>
<title>Свойство filter</title>
</head>
<body>
<style>
.black{
height:50px;
width:50px;
filter:blur(5px);
background:black;
z-index:1000;
}
</style>
<div>
</div>
<div class="black">
<img src="yandexMoney.jpg" alt="Yandex money"/>
</div>
</body>
</html>Здесь мы видим что для наше изображение стало размазанным, это и есть действие работы функции blur(5px), в ней нужно указывать радиус размытия.
Размытие часто применяют к фоновым изображениям. Вот в принципе и все что я хотел вам рассказать очень надеюсь что эта короткая статья была для вас содержательна и полезна.Удачи!
