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

Фильтры 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: saturate

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: grayscale

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: sepia

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: blur

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: opacity

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: invert

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: brightness

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: contrast

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: hue-rotate

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>
Filter: shadow

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

В примере, приведенном ниже, для получения эффекта инфракрасного изображения, используются два фильтра: 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>
Комбинация фильтров

Заключение

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

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

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

Ангелина Писанюкавтор-переводчик статьи «Using CSS Image Effects»