К элементам веб‑страницы можно применять графические фильтры, почти как в Фотошопе. Можно увеличить яркость, добавить контрастности и насыщенности, сделать элемент чёрно‑белым, добавить размытие и ещё пару спецэффектов. Всё это легко делается ЦСС‑свойством filter.
Свойство filter применяется к любому не пустому ХТМЛ‑элементу. Обычно фильтры используют для создания разных спецэффектов, но также они могут пригодиться, чтобы быстро изменить внешний вид встроенных на страницу картинок и видео без изменения самих файлов. Например, фильтрами можно быстро сделать все фото на сайте чёрно‑белыми.
Типы фильтров
Николай Товеровский. Управление проектами, людьми и собой
Поэкспериментируем на гусенице из книги Коли Товеровского. Свойство filter применяется так же, как любое другое ЦСС‑свойство — просто записывается в селектор, привязанный к ХТМЛ‑элементу, в нашем случае к картинке. Вот исходный код и внешний вид гусеницы без фильтров:
Николай Товеровский. Управление проектами, людьми и собой
<img class="caterpillar" src="caterpillar.png">.caterpillar {
filter: none;
}Применим к гусенице разные фильтры.
blur — размытие в пикселях или других единицах измерения ЦСС:
.caterpillar {
filter: blur(5px);
}brightness — яркость в процентах:
.caterpillar {
filter: brightness(150%);
}contrast — контрастность в процентах:
.caterpillar {
filter: contrast(25%);
}hue‑rotate — сдвиг по цветовому кругу в градусах:
.caterpillar {
filter: hue-rotate(-150deg);
}saturate — насыщенность цвета в процентах:
.caterpillar {
filter: saturate(250%);
}grayscale — чёрно‑белый фильтр в процентах:
.caterpillar {
filter: grayscale(100%);
}sepia — эффект сепии в процентах:
.caterpillar {
filter: sepia(90%);
}invert — инверсия цветов в процентах:
.caterpillar {
filter: invert(100%);
}drop‑shadow — фильтр‑тень. В отличие от ЦСС‑свойства box-shadow, тень будет отбрасываться не от прямоугольника элемента, а от непосредственно заполненных пикселей в нём. Например, этим фильтром можно добавить тень ПНГ‑картинке. Синтаксис как и у box-shadow: отступы, размер и цвет тени.
.caterpillar {
filter: drop-shadow(1px 1px 9px rgba(32, 150, 140, 90%));
}opacity — прозрачность в процентах. Аналог свойства opacity, но прозрачность фильтром в некоторых случаях будет немного производительнее.
.caterpillar {
filter: opacity(30%);
}Фильтры можно комбинировать для достижения интересных эффектов:
.caterpillar {
filter: drop-shadow(0 0 25px rgba(0, 55, 255, .3)) hue-rotate(90deg) saturate(300%);
}Обратите внимание, как при помощи одного ЦСС‑свойства можно серьёзно изменить внешний вид картинки. Сам файл картинки остаётся нетронутым, изменения можно быстро отключить. И не забывайте, что фильтры можно применять не только к картинкам, но и к другим ХТМЛ‑элементам.
Поддержка в браузерах
Все современные браузеры поддерживают фильтры, но иногда где‑то всё же могут появиться глюки, особенно при комбинировании фильтров или когда на странице очень много спецэффектов. Поэтому лучше дополнительно перепроверять работу фильтров в основных браузерах: Сафари, Хроме и Фаерфоксе.
Для старых браузеров обычно придумывают грациозную деградацию или ищут подходящие полифиллы.
Производительность
Фильтры требуют больше ресурсов браузера и компьютера, чем многие другие ЦСС‑свойства.
Чтобы избежать тормозов на странице, используйте фильтры осознанно и не применяйте их массово. Избегайте наслоения и дублирования фильтров. Если на странице много фильтров и других сложных спецэффектов, проверяйте и отлаживайте её работу на реальных низкопроизводительных устройствах: слабых ноутбуках, устаревших компьютерах и недорогих мобильных устройствах.
В современном вебе часто бывает, что у разработчиков и дизайнеров на крутых и мощных маках всё летает, а у обычных пользователей со средним железом сайт еле работает.
Анимация
Отдельная крутость фильтров — их несложно анимировать на чистом ЦССе. Например, можно раскрашивать чёрно‑белые фотографии при наведении курсора или просто устроить на странице психоделический трэш.
Об анимации фильтров и не только расскажу в следующих советах.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.