filters.css — CSS-магия для изображений без лишнего кода

Preview

Знакомая ситуация: нужно добавить эффект размытия или инвертировать цвета на изображении, а писать кастомные CSS-фильтры вручную лень? Именно для таких случаев создан filters.css — минималистичная библиотека, которая превращает сложные CSS-фильтры в простые классы.

Почему это удобно?

Представьте, что вам нужно:

Быстро сделать изображение черно-белым
Добавить эффект старинной фотографии (сепия)
Настроить прозрачность элемента

Обычно это требует написания CSS вроде:

.my-image {
  filter: grayscale(70%) blur(2px);
  opacity: 0.8;
}

С filters.css те же эффекты добавляются одним классом:

<img src="photo.jpg" class="grayscale-7 blur-2 opacity-8" />

5 причин попробовать filters.css

Никакого JavaScript — работает исключительно на CSS
Весит всего ~1KB после минификации и gzip
Готовые классы для 8 популярных фильтров с градацией от 0 до 10
Поддержка hover-эффектов через .hover- префикс
Совместимость со всеми современными браузерами

Что можно делать?

Библиотека включает 8 типов фильтров:

Размытие (blur)
Оттенки серого (grayscale)
Яркость (brightness)
Контрастность (contrast)
Инверсия цветов (invert)
Насыщенность (saturate)
Эффект сепии (sepia)
Фоновое размытие (backdrop-blur)

Каждый фильтр имеет 10 уровней интенсивности. Например, .blur-5 даст среднее размытие, а .invert-10 полностью инвертирует цвета.

Как подключить?

Три простых способа:

Через npm

npm install filters.css

Через CDN

<link href="https://unpkg.com/filters.css" rel="stylesheet">

Скачать файл

<link href="dist/filters.min.css" rel="stylesheet">

Практические примеры

Эффект при наведении:

<button class="hover-sepia-5">Наведи на меня</button>

Комбинация фильтров:

<div class="blur-2 grayscale-3 opacity-7">
  Полупрозрачный размытый элемент в оттенках серого
</div>

Фоновое размытие (поддержка не во всех браузерах):

<div class="backdrop-blur-4">
  Контент с размытым фоном
</div>

Кому особенно пригодится?

Фронтенд-разработчикам, которые хотят быстро прототипировать эффекты
Дизайнерам, экспериментирующим с визуальными стилями
Владельцам сайтов, добавляющим hover-эффекты без программирования
Всем, кто ценит минималистичные и легковесные решения

Под капотом

Библиотека написана на SCSS и компилируется в чистый CSS. Каждый класс генерирует соответствующее правило filter. Например:

.blur-3 {
  filter: blur(3px);
}

.hover-sepia-5:hover {
  filter: sepia(0.5);
}

Ограничения

Не поддерживает Internet Explorer
Backdrop-filter работает не во всех браузерах
Фиксированные уровни интенсивности (0-10) — для кастомных значений придется писать CSS вручную

filters.css — это как швейцарский нож для работы с визуальными эффектами. Простота использования сочетается с достаточной гибкостью для большинства задач. Если вам нужно быстро добавить фильтры без написания кастомного CSS — определенно стоит попробовать.

Проект активно развивается, имеет открытый исходный код (MIT License) и уже собрал более 350 звезд на GitHub. Для знакомства с полной документацией посетите официальный сайт.