Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

Функция инвертирования цветов картинок в css

Функция инвертирования цветов картинок в css

Всем привет вчера выполняя задачу натолкнулся на одно очень интересное решение.

Суть состояла в том что у меня были иконки социальных сетей с черным фоном и серым начертанием, что на фоне дизайна сайта на котором я работал смотрелось не очень.

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

Решением оказалась функция 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.

Удачи!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm