В css разбираюсь уже около года, но как-то не доводилось сталкиваться с фильтрами. И вот сегодня обратил на них внимание и хочу сделать для себя и для вас пометку о таком удивительном свойстве.
И так, css фильтры могут применяться к любым видимым элементам на странице. В скобках указывается «сила действия» параметра. Можно использовать одновременно несколько параметров в фильтре. Но есть одно НО! CSS Filters добавляют отличные визуальные эффекты, но в то же время негативно влияют на производительность вашего веб-сайта. Важно понимать что они делают и как это влияет на производительность. Большинство фильтров работают довольно быстро на любом устройстве поддерживающем их. Однако фильтры blur и drop-shadow, использующие эффект размытости, работают намного медленнее остальных.
Пример: div { filter: grayscale(100%); }
Рассмотрим возможные параметры:
grayscale() — делает объект ч/б. В скобках указываем значение как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
sepia() — получаем сепию. В скобках указываем значение как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
saturate() — насыщенность цвета.
hue-rotate() — меняем цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение указываем в градусах (0deg — 360deg).
invert() — инвертирует цвета. Значение указываем как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
opacity() — прозрачность. Задает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). Данный фильтр работает так же как и CSS свойство opacity. Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.
brightness() — яркость изображения. Значение указываем как в процентах (0% и больше), так и в десятичных дробях (0 и больше).
contrast() — контрастность изображения. Значение указываем как в процентах (0% и больше), так и в десятичных дробях (0 и больше).
blur() — эффект размытости. Значение указываем в пикселях (px).
drop-shadow(x, y, радиус, цвет) — тень объекта аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога. Пример 1: drop-shadow(16px 16px 20px black); Пример 2: filter: drop-shadow(inset 0 0 2rm blue);
url(ссылка на SVG фильтр) — можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id. Пример SVG: ... Пример CSS: div { filter: url(#foo); }
custom (coming soon) — в скором будущем станет доступна возможность создавать свои собственные фильтры с помощью CSS Shaders.
Большинство CSS фильтров сейчас доступны для использования в браузере FireFox и браузерах на движке WebKit. В скором времени надеемся увидеть поддержку в браузерах Opera и IE10. Так как спецификация все еще находится в разработке, приходится использовать вендорные префиксы. Для WebKit -webkit-filter, для FireFox префикс не требуется.
Предыдущая статья: Эффекты для кнопок на CSS3