Эффекты для изображений на 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, выглядит следующим образом:

Эффекты для картинок на 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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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>
Эффекты для картинок на CSS

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

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *