Всем привет вчера выполняя задачу натолкнулся на одно очень интересное решение.
Суть состояла в том что у меня были иконки социальных сетей с черным фоном и серым начертанием, что на фоне дизайна сайта на котором я работал смотрелось не очень.
Первым решением было зайти в фотошоп и отредактировать картинки сделать так называемую инверсию цветов. Но это очень простое решение подумал я нужно что то оригинальнее, того чего я еще не знаю порывшись в интернете я таки нашел оптимальное решение.
Решением оказалась функция invert свойства filter
Давайте рассмотрим пример с использованием этого свойства, возмите какую нибудь картинку, желательно одноцветную. Рассмотрим на примере
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Функция invert</title>
</head>
<body>
<style>
img{
filter:invert(1);
}
</style>
<img src="icon.jpg"/>
</body>
</html>Как видите у меня в корневой папке есть изображение с названием icon и рассширением jpg к которому я применил функцию invert свойства filter. Цвета которые и меня присутствовали на картинке, а именно черный и белый заменились на противоположные( черный стал белым, а белый стал черным)
И это здорово потому что если теперь понадобиться динамически менять цвета например при наведении (hover), то достаточно будет воспользоватьcя данной функцией и никаких дополнительных картинок и спрайтов нам не понадобится.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Функция invert</title>
</head>
<body>
<style>
img{
filter:invert(1);
cursor:pointer;
}
img:hover{
filter:none ;
}
</style>
<img src="icon.jpg"/>
</body>
</html>Можете попробовать и на фотографиях, но там эффект совершенно другой, примерно как на рентгеновских снимках.
Вот и все дорогие друзья что я вам хотел рассказать инвертирование цветов с помощью css.
Удачи!
