CSS Filter Generator

Grayscale 0%

Sepia 0%

Blur 0px

Brightness 100%

Hue Rotate 0°

Saturate 100%

Opacity 100%

Contrast 100%

Invert 0%

CSS фильтры: Полное руководство

CSS фильтры – это мощный инструмент, который позволяет разработчикам сайтов применять визуальные эффекты к элементам на веб-странице, такие как изображения, текст и другие элементы HTML. В этой статье мы рассмотрим, как использовать CSS фильтры, их поддержку браузерами и практические примеры применения.

Что такое CSS фильтры?

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

Основные типы CSS фильтров

blur() – Применяет размытие к элементу. Значение задается в пикселях.

filter: blur(5px);

brightness() – Изменяет яркость элемента. Значение задается в процентах.

filter: brightness(150%);

contrast() – Изменяет контрастность элемента. Значение задается в процентах.

filter: contrast(200%);

grayscale() – Применяет к элементу эффект черно-белого изображения. Значение задается в процентах.

filter: grayscale(100%);

hue-rotate() – Изменяет оттенок элемента. Значение задается в градусах.

filter: hue-rotate(90deg);

invert() – Инвертирует цвета элемента. Значение задается в процентах.

filter: invert(100%);

opacity() – Изменяет непрозрачность элемента. Значение задается в процентах.

filter: opacity(50%);

saturate() – Изменяет насыщенность элемента. Значение задается в процентах.

filter: saturate(200%);

sepia() – Применяет эффект сепии к элементу. Значение задается в процентах.

filter: sepia(100%);

Применение нескольких фильтров

Для применения нескольких фильтров одновременно можно перечислить их через пробел:

filter: brightness(150%) contrast(200%) saturate(150%);

Примеры использования

Применение фильтров к изображению:

<img src="image.jpg" style="filter: grayscale(100%);">

Применение фильтров к тексту:

<p style="filter: blur(2px);">Этот текст будет размытым</p>

Использование фильтров при наведении курсора:

<img src="image.jpg" style="transition: filter 0.3s;">
            <style>
                img:hover {
                    filter: brightness(120%) saturate(150%);
                }
            </style>

Поддержка браузерами

CSS фильтры поддерживаются большинством современных браузеров. Ниже приведена таблица поддержки основных браузеров:

Google Chrome: 18+
Mozilla Firefox: 35+
Safari: 6+
Opera: 15+
Microsoft Edge: Все версии
Internet Explorer: 10+ (с некоторыми ограничениями)

Заключение

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

Попробуйте использовать CSS фильтры в своих проектах и убедитесь сами, насколько они могут улучшить визуальное восприятие вашего веб-сайта.