53. filter: blur, brightness, contrast, etc.

CSS: Фильтры (blur, brightness, contrast и другие)

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

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

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

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

Рассмотрим наиболее часто используемые фильтры:

blur(): Размывает элемент. Значение задается в пикселях (px).

img {
  filter: blur(5px); /* Размытие изображения на 5 пикселей */
}

brightness(): Регулирует яркость элемента. Значение задается в процентах (0% - полная темнота, 100% - исходная яркость, >100% - ярче).

img {
  filter: brightness(150%); /* Увеличение яркости изображения на 50% */
}

contrast(): Регулирует контрастность элемента. Значение задается в процентах (0% - серый, 100% - исходная контрастность, >100% - более контрастно).

img {
  filter: contrast(200%); /* Увеличение контрастности изображения в 2 раза */
}

grayscale(): Преобразует элемент в оттенки серого. Значение задается в процентах (0% - цветное изображение, 100% - полностью серое).

img {
  filter: grayscale(100%); /* Преобразование изображения в черно-белое */
}

sepia(): Применяет к элементу эффект сепии. Значение задается в процентах (0% - без эффекта, 100% - максимальный эффект сепии).

img {
  filter: sepia(80%); /* Применение эффекта сепии к изображению */
}

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

img {
  filter: hue-rotate(90deg); /* Сдвиг оттенка изображения на 90 градусов */
}

invert(): Инвертирует цвета элемента. Значение задается в процентах (0% - без эффекта, 100% - полная инверсия).

img {
  filter: invert(100%); /* Инверсия цветов изображения */
}

opacity(): Устанавливает прозрачность элемента. Значение задается в процентах (0% - полностью прозрачный, 100% - полностью непрозрачный). Этот фильтр дублирует свойство opacity, но полезен, когда нужно применить несколько фильтров одновременно.

img {
  filter: opacity(50%); /* Установка прозрачности изображения на 50% */
}

drop-shadow(): Добавляет тень к элементу. Принимает параметры, аналогичные свойству box-shadow.

img {
  filter: drop-shadow(5px 5px 5px #666666); /* Добавление тени к изображению */
}

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

<!DOCTYPE html>
<html>
<head>
<title>CSS Filters</title>
<style>
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 300px;
  }

  img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Чтобы изображения не искажались */
  }

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

  .grayscale {
    filter: grayscale(100%);
  }

  .brightness {
    filter: brightness(120%);
  }
</style>
</head>
<body>
  <div class="container">
    <img src="image.jpg" alt="Original Image">
    <img src="image.jpg" alt="Blurred Image" class="blur">
    <img src="image.jpg" alt="Grayscale Image" class="grayscale">
    <img src="image.jpg" alt="Brightness Image" class="brightness">
  </div>
</body>
</html>

Замените image.jpg на путь к вашему изображению.

Жизненный пример

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

Размытие фона (blur): Часто используется для создания эффекта размытия фона за модальными окнами или навигационными панелями, чтобы привлечь внимание к основному контенту. Многие сайты используют это для эффекта “замороженного стекла”.
Изменение цветовой гаммы (hue-rotate, sepia, grayscale): Используется для создания уникального стиля сайта, особенно при переключении между светлой и темной темами. Также часто применяется для стилизации фотографий в портфолио.
Улучшение читаемости текста (brightness, contrast): Используется для улучшения читаемости текста поверх изображений, особенно на сайтах с большим количеством визуального контента.
Эффекты при наведении (hover effects): Фильтры часто применяются для создания интерактивных эффектов при наведении мыши на элементы, например, изменение яркости или контрастности изображения.

Ключевые моменты

Фильтры CSS позволяют применять визуальные эффекты к элементам без использования графических редакторов.
Основные фильтры: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity(), drop-shadow().
Фильтры можно комбинировать для создания более сложных эффектов.
Фильтры широко используются в современных веб-проектах для стилизации изображений, улучшения читаемости текста и создания интерактивных эффектов.
Важно помнить о производительности, особенно при использовании сложных фильтров на большом количестве элементов.