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

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

Использование CSS-фильтров

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

Существует 10 функций фильтров CSS для стилизации HTML-элемента:

  • размытие()
  • яркость()
  • контраст()
  • тень()
  • оттенки серого()
  • оттенок-поворот ()
  • инвертировать()
  • непрозрачность()
  • насыщать()
  • сепия()
instagram viewer

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

Некоторые из этих фильтров работают намного лучше, чем другие, при правильном использовании.

Вот примеры комбинирования фильтров CSS для достижения различных визуальных эффектов на элементе изображения.

1. Оттенки серого и сепия

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

сепия() фильтр применяет эффект тона сепии к изображению или текстовому элементу. Фильтр также принимает значение от 0 до 1.

Например:

изображение {
фильтр: оттенки серого(14%) сепия(30%);
}

Объединение оттенки серого() на 14% и сепия() при 30% может создать винтажный или ретро-эффект на вашем изображении.

2. Инверсия и насыщение

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

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

Например:

изображение {
фильтр: инвертировать(30%) насыщать(75%);
}

Этот код инвертирует цвета изображения и увеличивает насыщенность на 75%.

3. Оттенок-поворот и контраст

оттенок-поворот () filter изменяет оттенки изображения или текстового элемента, что означает, что он изменяет общий цвет элемента, сохраняя уровни яркости и насыщенности. Величина поворота может быть указана в градусах, где 0 соответствует исходному цвету, а 360 — полному повороту назад к исходному цвету.

Объединение оттенок-поворот () и контраст() фильтры могут создать яркий и красочный эффект на ваших изображениях.

Например:

изображение {
фильтр: hue-rotate(10град) контраст(150%);
}

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

4. Яркость и размытие

Фильтры яркости и размытия говорят сами за себя. Первый регулирует яркость вашего изображения, а второй контролирует уровень применяемого размытия.

Объединение яркость() и размытие() фильтры могут создать мечтательный и мягкий эффект на ваших изображениях.

Например:

изображение {
фильтр: яркость(0.8) размытие(5пикс.);
}

Приведенный выше код уменьшает яркость на 0.8 (80%) и применяет 5 пикселей эффект размытия изображения.

5. Drop-Shadow и непрозрачность

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

Между тем, фильтр непрозрачности управляет прозрачностью элемента.

Объединение тень() и непрозрачность() фильтры могут создать тонкий эффект на ваших текстовых элементах.

Например:

.текстовый эффект {
трансформировать: переводить(-50%, -50%);
цвет: черный;
тень: 10пикс. 9пикс. 9пикс.бежевый;
непрозрачность: 70%;
}

В этом примере тень расположена на 10 пикселей вправо и на 9 пикселей вниз с радиусом размытия 9 пикселей. Цвет тени указан как бежевый. Также указана непрозрачность 70%.

Использование режимов наложения CSS

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

Вот некоторые из наиболее популярных вариантов использования режимов наложения CSS:

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

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

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

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

Вот пример использования смешанный режим смешивания чтобы смешать текст и изображение.

HTML:

<дивсорт="контейнер">
<изображение
 источник = " https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 класс = «фоновое изображение»
 />
<дивсорт="содержание">
<h1>Добро пожаловатьh1>
<п>Привет Пользователь!п>
див>
див>

CSS:

.контейнер {
позиция: абсолютный;
ширина: 100%;
высота: 100%;
}
.изображение на заднем плане {
ширина: 100%;
высота: 100%;
объект-подходящий: крышка;
}


.содержание {
позиция: абсолютный;
вершина: 50%;
левый: 50%;
трансформировать: переводить(-50%, -50%);
выравнивание текста: центр;
смешанный режим смешивания: разница;
}


h1 {
размер шрифта: 60пикс.;
цвет: белый;
}
п {
размер шрифта: 40пикс.;
цвет: белый;
}

разница Режим наложения вычисляет абсолютную разницу между цветовыми значениями текста и нижележащего темного изображения.

В этом случае цвет текста будет взаимодействовать с темным фоном, что приведет к эффекту высокой контрастности.

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

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

Вот пример, в котором сочетаются фильтр и режим наложения для создания более сложного эффекта:

.мой элемент {
фильтр: яркость(150%) hue-rotate(180град) тень(0пикс. 0пикс. 10пикс.RGBA(0, 0, 0, 0.5));
смешанный режим смешивания: экран;
}

Этот код объединяет фильтры; яркость, hue-rotate, тень, и смешанный режим смешивания ценность экран к изображению. Он увеличивает яркость на 150%, в то время как hue-поворот инвертирует цвета изображения на 180 градусов.

Затем также применяется тень. Наконец, экран значение для режима наложения будет сочетать цвета изображения с основным фоном, В результате получается эффект, при котором более светлые цвета усиливаются, а более темные цвета смешиваются с фон.

Освоение фильтров и режимов наложения

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

Если вы больше поэкспериментируете с этими методами, вы можете добавить дополнительный уровень визуального интереса к своим проектам.