2.26. CSS3-фильтры
CSS3-фильтры предназначены для задания специальных эффектов различным html-блокам (в том числе и картинкам IMG). По своему виду они частично похожи на встроенные фотошоповские. СSS фильтры можно применять как к изображениям, так и к другим элементам разметки, которые содержат некоторый контент (не являются пустыми).
Среди классических фильтров в 3-ей версии каскадных стилей есть возможность их задания с помощью SVG, которые подгружаются при инициализации DOM-структуры. Однако, они поддерживаются в основном в линейке самых последних версий веб-обозревателей. При рендеринге браузер делает копию SVG-объекта и отрисовывает применяемый эффект по пикселям поверх оригинального. Используя совместно разные фильтры можно добиться нужных уникальных спецэффектов. Однако, следует помнить, что чем больше спецэффектов Вы примените, тем дольше браузер будет отрисовывать их на странице.
Каскадные стили позволяют использовать сразу несколько фильтров.
Поддержка браузеров
Приведем версии обозревателей, начиная с которых эффекты поддерживаются:
IE: —
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome (андройдовый): 55.0, 47.0 -webkit-
Список доступных
| filter | |
|---|---|
blur() |
В качестве входной переменной (радиуса размытия) указывается числовое значение в разных единицах: пикселях (px), относительных единицах (em), в точках (pt) и других. Эффект основывается на гаусовском размытии объекта относительно его оригинала. Чем больше значение задаваемого параметра, тем сильнее будет размывание. Дефолтное значение — 0. Пример записи filter: blur(10px); |
brightness() |
Это свойство позволяет изменять яркость html-блока, к которому она применяется. В качестве передаваемого параметра указывается цифровое значение от 0 до 100 в процентах (%) или десятичное число от 0 до 1 (то есть 0, 0.1, 0.2 и так далее). Чем больше значение параметра, тем большую яркость будет иметь объект. По умолчанию равно 1. Пример записи filter: brightness(62%);filter: brightness(0.62); |
contrast() |
Влияет на контраст html-блока, к которому применяется. Входной переменной выступает число от 0 до бесконечности в процентах или десятичная цифра от 0 до бесконечности. По умолчанию входной параметр равен 100% (эквивалент 1). В диапазоне от 0 до 100% (от 0 до 1) объект перекрашивается от темных тонов до оригинала, а в диапазоне выше 100% (выше 1), цветовая палитра выходит за пределы оригинала и стремится к белому цвету. Пример записи filter: contrast(33%);filter: contrast(0.33); |
drop-shadow() |
Эта функция позволяет задать объекту тень. Она работает подобно css-правилам box-shadow и text-shadow. В качестве входных переменных задаются: смещение по горизонтали, по вертикали, размытие, растяжение и цвет тени. При задании этого свойства он применяется не только к самому объекту, но и к объектам внутри него (например, к расположенному внутри html-блока тексту и т.д.). Синтаксис filter: drop-shadow(10px 13px 7px green); |
grayscale() |
Переводит объект с текущей цветовой палитрой в черно-белый диапазон цветов. Входной параметр — это десятичное число от 0 до 1 или число в процентах. При увеличении входного параметра, чернобелость усиливается. Синтаксис filter: grayscale(0.6);filter: grayscale(60%); |
hue-rotate() |
Это свойство изменяет оттенок объект про круговой палитре цветов. Входным параметром выступает числовое значение от 0 до 360 в градусах (deg). При входном нуле не применяется. Синтаксис filter: hue-rotate(270deg); |
invert() |
Эта функция инвертирует цветовую гамму объекта, делая его похожим на негатив. Входным значением может быть числовое значение от 0 до 100 в процентах (%). При нулевом значении объект не изменяется, а при 100% его цветовая палитра полностью инвертируется. Синтаксис filter: invert(100%); |
opacity() |
Этот эффект работает подобно css-правилу opacity, изменяя прозрачность объекта. В качестве входного параметра указывается цифровое значение от нуля до ста в процентах (%). При нулевом значении объект станет полностью прозрачным, а при 100% будет полностью видимым. Синтаксис filter: opacity(44%); |
saturate() |
Эта функция позволяет управлять насыщенностью объекта с опорой на его контрастность. В качестве входного параметра задается цифровое значение от 0 до бесконечности в процентах или десятичная цифра от 0 до бесконечности (0, 0.1, 0.2, … ). При нулевом значении насыщенность уменьшится до самого низкого уровня. В диапазоне от 0 до 100 — уменьшается, а в диапазоне выше 100% — увеличивается. Единица эквивалентна 100%. Синтаксис filter: saturate(22%); |
sepia() |
Эта функция позволяет состарить html-объект или придать ему ретро-эффект. В качестве передаваемой переменной задается цифровое значение от 0 до 100 в процентах (%). По мере увеличения параметра эффект увеличивается. Пример записи filter: sepia(178%); |
url() |
В качестве параметра передается путь к SVG файлу, или якорь к фильтру, который располагается в html-теле текущего документа. Пример записи filter: url(#id); — указываем айдишник фильтра в html-структуре текущего документа;filter: url(yourfilter.svg#id); — указываем на айдишник фильтра (якорь) в свгешном файле yourfilter.svg |
none |
Указав такой параметр, никакие спецэффекты применены не будут. |
initial |
Задав так, рассматриваемое свойство установится в значение по умолчанию. |
inherit |
Задав так, текущий объект унаследует данное свойство у своего родителя. |
Примеры
Рассмотрим все, описанное выше, на примере применения к некоторой картинке. Свойств будем применять при наведении на нее: :hover. Для большей наглядности сделаем плавное применение свойства, дописав дополнительное правило: transition: 0.6s ease-in-out;.
1. Блюрирование
img:hover
{
-webkit-filter: blur(3px);
filter: blur(3px);
}Наведите курсор мыши на картинку:
2. Изменение яркости
img:hover
{
-webkit-filter: brightness(40%);
filter: brightness(40%);
}3. Контрасность
img:hover
{
-webkit-filter: contrast(15%);
filter: contrast(15%);
}4. Чернобелость
img:hover
{
-webkit-filter: grayscale(0.65);
filter: grayscale(0.65);
}5. Изменение насыщенности
img:hover
{
-webkit-filter: saturate(300%);
filter: saturate(300%);
}6. Сепия
img:hover
{
-webkit-filter: sepia(95%);
filter: sepia(95%);
}7. Изменение тональности по кругу
img:hover
{
-webkit-filter: hue-rotate(270deg);
filter: hue-rotate(270deg);
}8. Инвертирование
img:hover
{
-webkit-filter: invert(100%);
filter: invert(100%);
}Применяя все описанные выше примеры, Вы сможете получить желаемый результат и научитесь управляться с разными эффектами. Не забывайте, что главное это практика. Набивая руку, верстая новые макеты, Вы сможете полноценно освоить профессию веб-разработчика (фронтендера).
Добавить комментарий