Категория:
Опубликовано:

Фильтры CSS

CSS filters

Негатив, Сепия, Контрастность, Цветовой тон, Насыщенность, Размытие...

Что за?.. Фильтры? Как в фотошопе?

Да! Все это можно делать с помощью CSS.

Не знали? Давайте расскажу как.

css-filters

Некоторые из вас могут быть знакомы со свойством filter, с помощью которого можно "приручить ослика".

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

Есть несколько фильтров, задаются они в формате

filter: имя_фильтра(значение)

В качестве значения обычно выступает процентное (0%-100%) или дробное (0-1) значение, в некоторых случаях градусы (0deg-360deg) и пиксели (0-∞).

Фильтры можно применять не только к изображениям, но и ко всем элементам страницы.

Для применения фильтров используется аппаратное ускорение, что позволяет "ускорить" некоторые эффекты, по сравнению с рендером с помощью обычных CSS-свойств (но стоит помнить о кроссбраузерности).

Можно применять несколько фильтров вместе, разделяя их пробелом.

Тренируемся на кошках:

Обесцвечивание:

grayscale() - значение задается в процентах (0%-100%) или десятичной дробью (0-1).

img: {
  filter: grayscale(100%);
}
grayscale

Сепиа:

sepia() - значение задается в процентах (0%-100%) или десятичной дробью (0-1).

img: {
  filter: sepia(1);
}
sepia

Насыщенность:

saturate() - значение задается в процентах (0%-∞) или десятичной дробью (0-∞).

img: {
  filter: saturate(3);
}
saturate

Цветовой тон:

hue-rotate() - значение задается в градусах (0deg-360deg).

img: {
  filter: hue-rotate(125deg);
}
hue-rotate

Негатив:

invert() - значение задается в процентах (0%-100%) или десятичной дробью (0-1).

img: {
  filter: invert(1);
}
invert

Прозрачность:

opacity() - значение задается в процентах (0%-100%) или десятичной дробью (0-1).

img: {
  filter: opacity(25%);
}
opacity

Яркость:

brightness() - значение задается в процентах (0%-∞) или десятичной дробью (0-1).

img: {
  filter: brightness(400%);
}
brightness

Контрастность:

contrast() - значение задается в процентах (0%-∞) или десятичной дробью (0-1).

img: {
  filter: contrast(350%);
}
contrast.png

Размытие:

blur() - значение задается в пикселях (0px-∞).

Данный фильтр может негативно отразится на скорости работы страницы.

img: {
  filter: blur(1px);
}
blur.png

P.S. Некоторые старые webkit-браузеры (Chrome, Opera, Safari) поддерживают свойство с префиксом -webkit-:

img: {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.
Добавить комментарий