Эффекты для изображений на 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: 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>
Заключение
Приведенные выше примеры можно использовать в различных целях. В том числе и для создания новых впечатляющих эффектов. Надеюсь, что данное руководство поможет вам в этом.