Меняем цвет PNG изображения через CSS: overlay-техника

Быстрый ответ

Чтобы изменить цвет PNG-изображения посредством CSS, вы можете использовать комбинацию свойства background-color контейнера и свойства mix-blend-mode для изображения. Режим наложения multiply часто обеспечивает наилучший результат.

.image-container {
   background-color: blue; /* Введите цвет по своему усмотрению */
}

img {
   mix-blend-mode: multiply; /* Здесь происходит магия наложения */
}

<div class="image-container">
   <img src="your-image.png" alt="">
</div>

Данный подход использует прозрачные области PNG, что позволяет цвету фона проникнуть только в видимую часть изображения. Ваши PNG будут выглядеть совсем по-новому, причём всего несколькими строчками кода!

Понимание CSS-фильтров для динамической манипуляции изображениями

Давайте подробнее рассмотрим процесс изменения цвета PNG-изображений с помощью CSS-фильтров. Свойство filter в CSS предоставляет широкие возможности для улучшения визуального восприятия и манипулирования изображениями в реальном времени.

Как это работает: Основы применения фильтров

CSS-фильтры — это функции, модифицирующие визуальное восприятие HTML-элементов. Буквально одна строка кода способна радикально изменить внешний вид ваших PNG.

img {
   filter: grayscale(100%); /* Превращаем изображение в черно-белый снимок */
}
img {
   filter: sepia(100%); /* "Подсвечиваем" фото для эффекта винтажа */
}
img {
   filter: saturate(200%); /* Делаем цвета насыщенными, как в кино */
}
img {
   filter: hue-rotate(90deg); /* Почему бы котикам не быть фиолетовыми? */
}

Подробнее об этом расскажет наш спикер на видео

Более подробно о hue-rotate

Фильтр hue-rotate вовлекает динамическую смену цветовой гаммы изображения. Через экспериментирование с комбинациями фильтров, например, с invert, можно добиться неожиданных эффектов.

img {
   filter: invert(75%) hue-rotate(90deg) saturate(3); 
   /* Сначала инвертируем цвета, затем добавляем цветовой фильтр! */
}

Визуализация

Вот пример использования hue-rotate:

img {
   filter: hue-rotate(90deg); /* Это происходит со стандартной синей собачкой... */
}

До: 🖼️🐶(Синяя Собака)
После применения hue-rotate: 🖼️🐕‍🦺(Желтая Собака)

Приложите свое воображение и представьте PNG-изображение как нейтральный объект, а filter — как кисть и краски.

Объект: 🗿 (PNG Изображение)
🎨 filter: hue-rotate(120deg) = Зеленый оттенок
Результат: 🗿💚 (Зеленый Объект)

Уже почувствовали себя художником? 🎨

Продвинутые эффекты фильтров

Добавление цветных теней при помощи drop-shadow

CSS-фильтры могут не только менять цвета, но и создавать впечатляющие эффекты теней. Функция drop-shadow помогает сделать элементы изображения более заметными:

img {
   filter: drop-shadow(2px 2px 5px blue); /* Теперь тень также является частью стиля! */
}

Сопоставление Font Awesome и SVG

Наиболее удобно использовать иконки Font Awesome для настройки иконок, так как их легко масштабировать и менять через CSS. Однако SVG же отлично подходит для работы с векторной графикой, обеспечивая несравненный контроль при динамических изменениях:

<svg>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Полезные материалы

1. filter | CSS-Tricks — Исследуйте все возможности свойства CSS filter при редактировании цветовых параметров изображений.
2. The Art Of SVG Filters And Why It Is Awesome — Smashing Magazine — Откройте для себя мощные возможности SVG-фильтров для изменения цвета PNG.
3. Blending Modes Demystified – A List Apart — Разгадайте тайны режимов наложения в CSS для получения разнообразных цветовых эффектов.
4. CSS filter Property – W3Schools — Незаменимый справочник по свойству CSS filter.
5. How to Create a Warm, Retro Text Effect in Adobe Illustrator | Envato Tuts+ — Учебник о создании ретро-эффектов для текста и манипуляции изображениями в Adobe Illustrator.