Эффекты для изображений на CSS

2023-02-04

Фильтры CSS позволяют применять к изображениям эффекты, аналогичные фильтрам Photoshop.

Синтаксис свойства filter выглядит следующим образом:

filter: <blur()>, <brightness()>, <contrast()>, <drop-shadow()>, <grayscale()>, <invert()>, <saturate()>, <hue-rotate()>, <opacity()>, <sepia()/>

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

filter: blur(20px) grayscale(20%);

Параметры, которые может принимать свойство:

Размытие (blur) – эта функция размывает изображение. Чем больше значение, тем сильнее эффект размытия. Значение по умолчанию равно 0.
Яркость (brightness) – значение 0% сделает изображение абсолютно черным, 100% оставит его без изменений, а более – повысит яркость.
Контрастность (contrast) – значение 0% сделает изображение полностью серым, 100% оставит исходное изображение без изменений, больше – повысит контрастность.
Тень (drop-shadow) –создает эффект тени на изображении. Функция принимает один из следующих параметров:
- Горизонтальная тень (Н-shadow) – обязательный параметр. Он устанавливает смещение тени по горизонтали. Отрицательное значение задает сдвиг тени влево.
- Вертикальная тень (V-shadow) – обязательный параметр. Задает смещение тени по вертикали. Отрицательное значение сдвигает тень вверх.
- Цвет (color) – необязательный параметр. Если он не указан, браузер добавляет определенный цвет к тени.
- Растяжение (spread) – необязательный параметр. Устанавливается в пикселях. Положительное значение растягивает тень, а отрицательное – сжимает.
Содержание
Grayscale – значение 0% оставляет изображение без изменений, а 100% преобразует его в черно-белое. Значение по умолчанию равно 0;
Инверсия (invert) – инвертирует цвета исходного изображения. Значение 0% оставляет изображение без изменений, а значение 100% полностью инвертирует изображение (негатив). Значение по умолчанию равно 0.
Насыщенность (saturate) – управляет цветовой насыщенностью. Значение 0% делает изображение черно-белым, значение 100% оставляет изображение без изменений, выше – повышает насыщенность. Значение по умолчанию равно 1.
Поворот оттенка (hue-rotate) – меняет оттенки цветов изображения. Значение 0 градусов оставляет изображение без изменений, максимально допустимое значение – 360 градусов.
Непрозрачность (opacity) – значение 0% делает изображение полностью прозрачным, 100% оставляет изображение без изменений. Значение по умолчанию равно 1. Отрицательные значения недопустимы.
Сепия (sepia) – эффект «старения» изображения. Значение 0% оставляет изображение без изменений, 100% полностью преобразует изображение в сепию. Значение по умолчанию 0, отрицательные – недопустимы.
url –принимает местоположение XML- файла, который определяет фильтр SVG.

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

Filter: saturate

Первое значение свойства filter меняет цветовую насыщенность изображения.

<html>
<head>
<style>
img {
    filter: saturate(300%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - saturate</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: grayscale

Ниже приведен пример использования CSS-фильтра grayscale:

<html>
<head>
<style>
img {
        filter: grayscale(80%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - grayscale</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: sepia

Следующий пример демонстрирует эффект, полученный от применения фильтра sepia:

<html>
<head>
<style>
img {
    filter: sepia(70%);
}
</style>
</head>
<body>
<h2>Sepia Filter - filter: sepia(70%);</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: blur

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

<html>
<head>
<style>
img {
     filter: blur(2px);
}
</style>
</head>
<body>
<h2>CSS Filter Property - blur</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: opacity

В следующем примере показано, как работает фильтр opacity:

<html>
<head>
<style>
img {
    filter: opacity(30%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - opacity</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: invert

Следующий пример использует CSS-фильтр invert:

<html>
<head>
<style>
img {
     filter: invert(100%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - invert</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: brightness

Ниже показан пример использования фильтра brightness:

<html>
<head>
<style>
img {
     filter: brightness(1.1);
}
</style>
</head>
<body>
<h2>CSS Filter Property - brightness</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: contrast

Пример применения фильтра contrast:

<html>
<head>
<style>
img {
     filter: contrast(180%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - contrast</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Filter: hue-rotate

CSS-фильтр hue-rotate позволяет создавать удивительные эффекты. Пример использования функции с тремя разными параметрами:

<html>
<head>
<style>
img {
    filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<h2>CSS Filter Property - filter: hue-rotate</h2>
<img src=".jpg" width="400" height="240"/>
</body>
</html>

Filter: shadow

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

<html>
<head>
<style>
img {
    filter: drop-shadow(30px 10px 4px #58D68D);
}
</style>
</head>
<body>
<h3>CSS Filter Property - filter: drop-shadow  </h3>
<h5>filter: drop-shadow(30px 10px 4px #58D68D);</h5>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

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

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

<html>
<head>
<style>
img {
    filter: hue-rotate(180deg) saturate(4);
}
</style>
</head>
<body>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Заключение

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

Пожалуйста, оставьте свои мнения по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки низкий вам поклон!