Функции фильтров в CSS. Полное руководство с примерами

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

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

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

Синтаксис использования фильтров

element {
    filter: filter-function(parameters);
}

Можно применять несколько фильтров одновременно, разделяя их пробелами.

element {
    filter: filter1(parameters) filter2(parameters) ...;
}

Список функций фильтров

1. blur()

Функция blur() создаёт размытие изображения.

img {
    filter: blur(5px);
}

В этом примере изображение будет размыто на 5 пикселей.

2. brightness()

Функция brightness() изменяет яркость изображения. Значение 1 оставляет изображение без изменений, меньше 1 уменьшает яркость, больше 1 увеличивает.

img {
    filter: brightness(0.5);
}

Этот пример уменьшает яркость изображения до 50%.

3. contrast()

Функция contrast() изменяет контрастность изображения. Значение 1 оставляет изображение без изменений, меньше 1 уменьшает контрастность, больше 1 увеличивает.

img {
    filter: contrast(2);
}

Этот пример удваивает контрастность изображения.

4. grayscale()

Функция grayscale() переводит изображение в оттенки серого. Значение 0 оставляет изображение без изменений, 1 делает его полностью серым.

img {
    filter: grayscale(1);
}

Этот пример делает изображение полностью черно-белым.

5. hue-rotate()

Функция hue-rotate() изменяет оттенок изображения. Значение задаётся в градусах (deg).

img {
    filter: hue-rotate(90deg);
}

Этот пример изменяет оттенок изображения на 90 градусов.

6. invert()

Функция invert() инвертирует цвета изображения. Значение 0 оставляет изображение без изменений, 1 полностью инвертирует цвета.

img {
    filter: invert(1);
}

Этот пример полностью инвертирует цвета изображения.

7. opacity()

Функция opacity() изменяет непрозрачность изображения. Значение 1 оставляет изображение полностью непрозрачным, меньше 1 делает его прозрачным.

img {
    filter: opacity(0.5);
}

Этот пример уменьшает непрозрачность изображения до 50%.

8. saturate()

Функция saturate() изменяет насыщенность изображения. Значение 1 оставляет изображение без изменений, меньше 1 уменьшает насыщенность, больше 1 увеличивает.

img {
    filter: saturate(2);
}

Этот пример удваивает насыщенность изображения.

9. sepia()

Функция sepia() переводит изображение в сепию. Значение 0 оставляет изображение без изменений, 1 делает его полностью сепиевым.

img {
    filter: sepia(1);
}

Этот пример делает изображение полностью сепиевым.

10. drop-shadow()

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

img {
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}

Этот пример добавляет тень со смещением 10 пикселей по горизонтали и вертикали, размытие 5 пикселей и полупрозрачный чёрный цвет.

Комбинирование фильтров

Фильтры могут быть комбинированы для достижения сложных эффектов.

img {
    filter: grayscale(1) blur(5px) contrast(1.5);
}

В этом примере изображение становится черно-белым, размытым и с увеличенной контрастностью.

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

Пример 1: Изменение яркости и контрастности

img.bright-contrast {
    filter: brightness(1.2) contrast(1.5);
}

Пример 2: Сепия и тень

img.sepia-shadow {
    filter: sepia(1) drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}

Пример 3: Полупрозрачное черно-белое изображение с размытой тенью

img.custom-filter {
    filter: grayscale(1) opacity(0.7) drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

Заключение

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