Эффекты CSS-фильтров


Оглавление (нажмите, чтобы открыть):

Фильтры CSS эффектов для изображений

В материале представлены различные виды эффектов, которые появляются при наведении изображения, где задействованы разные стили фильтров на CSS. Что вероятно многие встречали на различных сайтах, где наводили курсор и видели оттенок серого размытия или метод масштабирования CSS3, который идет для свойства transform. Используя метод масштаба свойства transform, создается эффект наведение.

Ведь эта подборка эффектов, которые только появляются при наведении на изображение, это отличный способ отобразить авторские картинки, где закреплены за статьей или материалом, делая сам материал оригинальным. Различные эффекты, которые мы увидим в этой демонстрации, достигаются при помощи различных методов фильтра CSS, а также масштабирования CSS3, под свойства transform для основы.

Эффект наведения изображения с помощью фильтров CSS

Эффект наведения черно-белого изображения

Эффект наведения на изображение ZoomIn-ZoomOut

Эффект наведения ZoomIn-ZoomOut и черно-белого изображения

Эффект размытого изображения

Приступаем к установке:

#mevaod-maluegos <
width: 695px;
padding: 10px;
box-sizing: border-box;
margin: 20px auto;
overflow: hidden;
>

.pervaya-animatsiya <
width: 196px;
height: 196px;
margin: 7px;
float: left;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
>

.pervaya-animatsiya img <
width: 100%;
height: 100%;
border-radius: 50%;
>

/* черно-белый эффект навидение*/
.pervaya-animatsiya .snimok-1 <
filter: grayscale(1);
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-1 <
filter: grayscale(0);
transition: 0.5s ease-in-out;
>

/* эффект масштабирования */
.pervaya-animatsiya .snimok-2 <
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-2 <
transform: scale(1.2, 1.2);
transition: 0.5s ease-in-out;
>

/* увеличение и уменьшение масштаба изображения в черно-белом режиме */
.pervaya-animatsiya .snimok-3 <
filter: grayscale(1);
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-3 <
transform: scale(1.2, 1.2);
filter: grayscale(0);
transition: 0.5s ease-in-out;
>

/* эффект размытия */
.pervaya-animatsiya .snimok-4 <
filter: blur(4px);
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-4 <
filter: blur(0);
transition: 0.5s ease-in-out;
>

/* медиа-запросы */
@media all and (min-width: 0px) and (max-width: 920px) <
#mevaod-maluegos <
width: 540px;
margin: 20px auto;
>
>

Вероятно многим такие эффекта знакомы, что теперь вы можете поставить на свой портал. Здесь представлено 4 анимационных эффекта, что больше нравится, где по умолчанию идет крайняя версия, где мы не видим снимок.

И только с наведением курсора он появляется в корректном обозначение, что можно в оригинальном виде посмотреть. Но только стоит убрать клик, как изображение автоматически становится, как изначально наблюдали.

Для достижения эффекта, так как хотите его видеть, то для этого все в CSS подписано, где и какой стиль отвечает за эффект, это класс snimok-под номером.

Эффекты CSS-фильтров

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами — это filter.

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

Фильтрация

Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur:

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

Яркость

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

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

Насыщенность измеряется в процентах.

Поворот тона

Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.

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

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

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

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% — это будет завершенная сепия, 0% — исходное изображение.

Поддержка браузерами

Webkit Mozilla Trident Presto
Размытие Экспериментальная Нет Нет Нет
Яркость
Насыщенность
Поворот тонов
Контрастность
Инверсия Только полная инверсия
Обесцвечивание Экспериментальная
Sepia

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Эффекты фильтра CSS

В этой статье мы рассмотрим эффекты фильтров CSS, что они делают и как их использовать. Будут примеры фильтров CSS3, поговорим о производительности фильтров на настольных и мобильных устройствах, так как скорость важна для работы пользователям. И в конце рассмотрим, состояние современных браузеров отобразить эффекты фильтра CSS3.

Эффекты фильтра CSS

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

Прошлое, настоящее и будущее фильтров CSS

Эффекты фильтра появились как часть спецификации Scalable Vector Graphics (SVG). Они были созданы, для применения различных эффектов на основе растровых изображения в векторный рисунок. Со временем, производители браузеров добавили поддержку фильтра SVG в свои браузеры, полезность этого стала очевидной. Роберт O’Callahan от Mozilla выступил идею использование фильтра SVG путем применения CSS для контента. Это была блестящая идея, прототипы показали, насколько мощные могут быть фильтры CSS. Рабочая группы W3C решила одобрить использование фильтров для HTML и SVG с помощью стилей CSS и, таким образом родился, filter со свойствами CSS. Сейчас есть тонны работ с фильтрами, работающих на CSS и SVG .

Поддержка браузерами SVG filters

Internet Explorer Chrome Opera Safari Firefox Android iOS Safari Android Chrome
10+ 31+ 27.0+ 7.0+ 31+ 4.4+ 7.1+ 42+

Как работают фильтры CSS

Когда браузер загружает веб-страницу, он должен применить стили, подключенные к этой странице. Фильтры, перед загрузкой страницы копируются на экран. В это время, фильтры делают снимок изображения на загружаемой странице в виде растрового изображения, а затем результат появляется поверх оригинального изображения страницы.

Если использовать их правильно, они не повлияют на скорость вашего сайта!

Определить фильтры с помощью SVG и CSS

Так как фильтры CSS изначально пришли из SVG существуют различные способы для определения и использования фильтров. Сам элемент SVG, который обеспечивает определение различных эффектов фильтра, использует синтаксис XML. Набор фильтров определяется в CSS так их легче использовать.

Большинство фильтров CSS похожи на фильтры SVG, даже в таблице стилей могут быть ссылки на фильтр SVG, если хотите. Дизайнеры приложили много усилий, чтобы сделать применение фильтров CSS проще, в этой статье примеры фильтров, доступные непосредственно из CSS.

Применить фильтр CSS

фильтр будет работать во всех современных браузерах. Чтобы использовать фильтры, вы должны использовать префикс поставщиков для свойства filter. Нет ни чего сложного ниже простой пример.

Изображение внутри всех элементов

Исходное изображение..
Фильтр оттенки серого (grayscale)

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

Фильтр оттенки серого (grayscale) (50%).

Если вы хотите применять различные фильтры один за другим, это просто, достаточно поместить их в CSS следующим образом:

Этот пример сначала сделает оттенки серого цвета, а затем применит эффект сепии, и будет иметь вид:

Применить оттенки серого (grayscale) и эффект сепии (Sepia)

Всё зависит от вашего воображения, экспериментируйте.

Доступные эффекты фильтров в CSS

CSS вводит кучу стандартных эффектов фильтра, которые делают их использование на много легче.
Давайте посмотрим на каждый из них, и что они делают.

Фильтр оттенки серого — grayscale (контролируется)

Превращает цвета в изображении в оттенки серого. Контролируется, сколько применить серого. Если это 100%, то все будет с оттенками серого, если это 0% цвета остаются неизменными, 0 работает так же, как 0% в то время как 1,0 работает так же, как 100%.

Фильтр cепия — sepia (контролируется)

Фильтр сепия изменить цвета с оттенками сепия, как на старых фотографиях. Контролируется так же, как и фильтр оттенки серого (grayscale), но эффект следует применять в меньшем количестве.

Фильтр насыщенность — saturation (контролируется)

Этот эффект добавит насыщенность цветов, и делает их более яркими. Это классный эффект, который может делать фотографии привлекательными. Эффект позволяет использовать значение больше 100%, что бы увидеть насыщенность.

Фильтр оттенок освещения — hue-rotate (angle)

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

Фильтр инвертировать — invert (контролируется)

Этот эффект переворачивает цвета — количество эффекта контролируется. Как и раньше, используйте значения от 100% и меньше, что бы изменить эффект инвертирования.

Фильтр непрозрачность — opacity (контролируется)

Если вы хотите что изображение выглядело полупрозрачным, установите нужное количество непрозрачности. 100% полностью непрозрачен, меньше 100% изображения станет менее непрозрачным (более прозрачным), и его будет видно все меньше и меньше. Количество 0% означает, что изображение полностью исчезнет — это нужно, если вы хотите создать активную области, ничего не показывая, что то наподобие overflow:hidden
Непрозрачность работает так же, как и свойство opacity в CSS3. Прозрачность CSS не является аппаратным ускорением, но некоторые браузеры, которые поддерживают фильтры, используют аппаратное ускорение для ускорения фильтра прозрачности для более высокой производительности.

Фильтр яркость — brightness (контролируется)

Фильтр яркость похож на регулировку яркости экрана телевизора. Он регулирует цвет между черным и полностью оригинальным цветом по мере добавлении параметров. Если вы установите 0% вы увидите только черный, если увеличивать количество до 100%, всё больше и больше будет проясняется исходное изображение, на 100% будет исходное изображение. Можно продолжать и установить до 200% что сделает изображение в два раза ярче, это можно использовать для тёмных изображений!

Фильтр контрастность — contrast (контролируется)

Фильтр контрастность позволит регулировать разницу между темными и самыми светлыми тонами исходного изображения. Если установить значение 0% будет всё черное, так же, как с яркостью. Но если вы измените значение до 100%, изменятся тона цвета. Можно установить значение больше 100% это такой же эффект, который увеличивает разницу между светлыми и темными цветами.

Фильтр размытие — blur (радиус)

Если вы хотите сделать для контента мягкие края, вы можете применить фильтр размытие (blur). Он размоет все цвета, это похоже когда фон не в фокусе. Параметр ‘radius’ (радиус) определяет, сколько пикселей размыть, чем большее значение тем больше размытие. Значение 0 оставляет изображение без изменений.

Фильтр тень drop-shadow (shadow)

Параметр тень (shadow), передаётся немного сложнее, и не только одно значение. Это ряд значений, разделенные пробелом, — и некоторые значения являются обязательными! Значение которые нужно устанавливать — где тени находится, сколько применить размытие, цвет тени, и т.д. В примере показано как можно контролировать тени. Для получения кода тени перейдите по ссылке инструменты CSS3 спецификация определяет тень в мельчайших подробностях. Ниже несколько примеров, которые должно дать вам идеи о том, как использовать тень.

Фильтр тень drop-shadow(16px 16px 20px Black)
Фильтр тень drop-shadow(10px 16px 30px purple)

Это еще один фильтр, похожий на существующий в CSS3 box-shadow. Если использовать фильтр — это означает, что он может использовать аппаратное ускорение некоторых браузеров.

URL ссылки SVG фильтры

Так как фильтры произошли как часть SVG, это вполне логично, что вы должны уметь добавить содержимое с помощью фильтр SVG . Это легко с текущими фильтрами. Все фильтры SVG определяются с атрибута ID, который может быть использован для получения эффекта фильтра. Таким образом, чтобы использовать любой фильтр SVG в CSS, вам нужно сослаться на него с помощью ‘URL’ синтаксиса.

Например, разметка фильтр SVG может быть такой:

Затем с CSS вы можете сделать что-то простое:

Поле этого все элементы

Производительность

Фильтры CSS, мощный инструмент для визуальных эффектов, но в то же время может повлиять на производительность вашего сайта, особенно если вы хотите, чтобы ваш сайт хорошо работал на мобильных устройствах.

Во-первых, не все фильтры одинаковы, по производительности! На самом деле, большинство фильтров будут работать очень быстро, на любой платформе и не сильно влияют на производительность. Тем не менее, фильтры, которые делают любое размытие, как правило, медленнее, чем другие. Но это не означает, что вы не должны использовать их.

Поскольку на некоторых платформах можно использовать GPU для ускорения, но это не во всех браузерах. В случае сомнений лучше всего экспериментировать с радиусом, который даст вам желаемого эффекта, а затем попытаться уменьшить его как можно больше при сохранении лучшего визуального эффекта. Таким образом вы увеличите скорость сайта на телефоне.

Если вы используете фильтры на основе «URL», которые ссылаются на SVG фильтры, они могут содержать произвольный эффект фильтра так что надо знать, что они тоже могут быть медленными, поэтому постарайтесь, убедиться, что вы знаете, что эффект фильтра делает и производительность в порядке.

Поддержка браузерами

Сейчас не все браузеры поддерживают все эффекты фильтров. В настоящее время фильтры CSS доступны в браузерах на основе WebKit и Mozilla. Мы ожидаем увидеть их в ближайшее время в опере, а также IE 10 . Поскольку спецификация находится в стадии разработки, некоторые производители браузеров внедрили этот материал с использованием поставщиков префиксов. Таким образом нужно использовать префиксы -webkit-filter, -moz-filte и следите за другими реализациями браузера по мере их появления.

Отметим, что ряд современных браузеров начинают внедрять фильтры CSS на аппаратное обеспечение (с GPU-ускорением). Когда их применят с поддержкой GPU, производительность будет значительно улучшена.

Эффект фильтра Поддержка браузеров Производительность
grayscale Chrome очень быстро
sepia Chrome очень быстро
saturate Chrome очень быстро
hue-rotate Chrome быстро
invert Chrome очень быстро
opacity Chrome может быть медленным
brightness Chrome быстро
contrast Chrome быстро
blur Chrome медленно
drop-shadow Chrome может быть медленным
url() Mozilla меняется: медленно, быстро

Рекомендуем прочесть статью CSS шейдеров для эффектов фильтра , где узнаете о CSS шейдеров: какие они, как они работают, и как их можно использовать для создания собственных эффектов.

Онлайн генератор CSS фильтров для изображений

CSS фильтр: Оттенки серого

CSS фильтр: Сепия

CSS фильтр: Смещение цвета

CSS фильтр: Инвертирование цвета

CSS фильтр: Контраст

CSS фильтр: Размытие

CSS фильтр: Якрость

CSS фильтр: Насыщенность

CSS фильтр: Прозрачность

CSS фильтр: Тень

CSS фильтр: ALL

ОНЛАЙН ГЕНЕРАТОР CSS ФИЛЬТРОВ ДЛЯ ИЗОБРАЖЕНИЙ

Для того чтобы упростить представление работы css свойства «filter» вы можете воспользоваться онлайн генератором. В левой и правой колонках представлены все 10 вариаций фильтров, кроме того на верхней панели можно переключить центральный вид на одновременное применение всех фильтров. В общем случае после выбора необходимого вам свойства, в центральной колонке будет отображен блог с изображением, ползунком и поле с кодом. Изменяя значения фильтра с помощью ползунка вы тут же сможете увидеть как будет выглядеть тот или иной фильтр, код также будет реагировать на движение ползунка и его можно скопировать сразу же после достижения нужного результата.

Формат изображения* — формат изображения для которого применяется фильтр.

Параметры вставки фильтра* — выбор как будет загружен фильтр на страницу.

Активировать все фильтры — открывается вид с ползунками для каждого фильтра. Фильтры будут применены одновременно.

Перезагрузка — сброс всех параметров.

* — В будущем будут добавлены варианты для изменения и этих параметров.

Общая информация о свойстве CSS — Filter

CSS свойство filter позволяет манипулировать цветом изображения путём наложения на него различных фильтров, таких как сепия, оттенки серого, насыщенность и т.д. Так как свойство введено относительно недавно (первое описание стандарта от 25 октября 2012) его не поддерживают старые браузеры, в том числе вся линейка Internet Explorer.

Поддержка CSS свойства filter в разных браузерах:

  • Не совместимо с IE. Подробнее о возможной совместимости — Microsoft Library.
  • Edge — не поддерживается url.
  • Chrome с 58 до 49 версии и Android Browser в Android 4.4 и 4.4.4 требуют добавления префикса «-webkit-«.

Описание значений свойства filter

BLUR — Размытие

Возможные величины: длина (px,rem,vw,vh и т.д.).

Диапазон: 0 — ∞; где ноль исходное изображение.

Описание: Размытие, смещение резкости, расфокусировка. При больших значениях свойства, изображение может становиться близким к монотонному. Также при больших значениях может понадобиться время чтобы эффект отрендерился в браузере.

Пример: filter: blur(10px);

Мастер Йода рекомендует:  Серия видеоуроков по HTML5 Canvas

BRIGHTNESS — Яркость

Возможные величины: число, проценты.

Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

Описание: Увеличение и снижение яркости. При величине меньше единицы или 100% изображение будет темнеть (в нуле чёрное), при значениях больше единицы или 100% изображение будет становиться ярче.

Пример: filter: brightness(0.2);

CONTRAST — Контраст

Возможные величины: число, проценты.

Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

Описание: Увеличение и снижение контрастности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле серое), при значениях больше единицы или 100% на изображении будет увеличиваться количество цветовых оттенков.

Пример: filter: contrast(200%);

DROP-SHADOW — Тень

Возможные величины: Длина и цвет для тени.

Диапазон: любое значение для первых двух параметров смещения; 0 — ∞, для параметра размытия, где 0 — отсутствие размытия.

Описание: Тень для изображения, необходимо задать два первых параметра длины для смещения тени по оси координат (x,y), третий параметр задаёт размытие/прозрачность тени (третий параметр не должен быть меньше нуля). Последний параметр — цвет тени (стандартное значении цвета при его отсутствии разнится в зависимости от браузера, например в Chrome оно равно — #1a1a1a ). Порядок в спецификации задан следующим образом: 1 — смещение по оси X; 2 — смещение по оси Y; 3 — размытие; 4 — цвет тени. При этом браузеры также активируют свойство если цвет тени задать в самом начале — перед смещением по оси абсцисс (Х). Значение равнозначны с css свойством ‘box-shadow’.

Пример: filter: drop-shadow(20px -20px 10px #000);

GRAYSCALE — Оттенки серого

Возможные величины: число, проценты.

Диапазон: 0 — 1, 0%-100%;где 0 или 0% — оригинальное изображение.

Описание: Увеличение и снижение количество цветов на изображении.

Пример: filter: grayscale(0.2);

HUE-ROTATE — Смещение цвета

Возможные величины: угловые (градусы, радианы)

Диапазон: любое значение ; где 0 или 360deg — оригинальное изображение.

Описание: Действие основано на замене текущего цвета, на цвет который будет получен при смещении на заданный угол по цветовому кругу. Например, синий цвет при смещении угла в 90 градусов — filter: hue-rotate(90deg), сменится на салатовый, а при значении 180deg смениться на жёлтый.

CSS фильтр Hue-rotate — схема смещения на 120deg,
в результате цвет #007bff будет заменён на #7dfc04

Пример: filter: hue-rotate(180deg);

INVERT — Инвертирование цвета

Возможные величины: число, проценты.

Диапазон: 0 — 1 , 0%-100%; где 0 или 0% — оригинальное изображение.

Описание: Инвертирование цвета (например, с чёрного в белый), 0 — оригинальное изображение, 1 или 100% полностью инвертированное. В середине процесса инвертирования (0.5 или 50%) изображение становится полностью серым.

Пример: filter: invert(90%);

Opacity — Прозрачность

Возможные величины: число, проценты.

Диапазон: 0 — 1 , 0%-100%; где 1 или 100% — оригинальное изображение.

Описание: Прозрачность. Разница между обычным свойством ‘opacity’ в том, что фильтр можно наложить совместно с другими фильтрами при этом не получить умножение прозрачности для всего блока. Свойство opacity: 0.5 и filter: opacity(0.5) без примесей других модификаторов — равнозначны, но при этом применённые к одному блоку не дадут ему полную прозрачность. (Можете попинать в комментариях в более правильном направлении).

Пример: filter: opacity(0.7);

Saturate — Насыщенность

Возможные величины: число, проценты.

Диапазон: 0 — ∞, 0%-∞%; где 1 или 100% — оригинальное изображение.

Описание: Увеличение и снижение насыщенности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле будут использованы только оттенки серого, равнозначно grayscale(1) ), при значениях больше единицы или 100% на изображении будет увеличиваться насыщенность цветов.

Пример: filter: saturate(0.7);

SEPIA — Сепия

Возможные величины: число, проценты.

Диапазон: 0 — 1, 0%-100%; где 0 или 0% — оригинальное изображение.

Описание: Имитация выцветшей фотографии (эффект старины). На 100% или 1, в изображении будут использованы только оттенки коричневого (светло-коричневого) цвета.

Пример: filter: sepia(100%);

CSS свойство filter. Фильтры в CSS

CSS свойство filter позволяет применить к элементам художественные эффекты. Лучше всего для этого подходят изображения, которые можно размыть, сделать ярче, преобразовать в черно-белую палитру и др. Настольные Мобильные

Internet Explorer Chrome Opera Safari Firefox
13 18 15 6 35
Android Firefox Mobile Opera Mobile Safari Mobile
4.4 35 30 6

Internet Explorer c 4 до 10 версии поддерживает другое нестандартное свойство filter с тем же именем, но другим синтаксисом.

Chrome, Opera и Safari поддерживают свойство -webkit-filter.

Краткая информация по CSS-свойству filter

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Правила написания свойства filter

Здесь none — отменяет действие наложенных фильтров, — применяемый фильтр. Перечислим имеющиеся в нашем распоряжении фильтры:

Применяет эффект размытия к изображению. Большее значение будет создавать большее размытия. Если значение не указано, используется 0.

Регулировка яркости изображения. 0% сделает изображение полностью черным. 100% — дефолтное значение и представляет собой исходное изображение. Значение более 100% сделает изображение ярче.

Регулировка яркости изображения. 0% сделает изображение полностью черным. 100% — дефолтное значение и представляет собой исходное изображение. Значение более 100% сделает изображение более контрастным.

drop-shadow(x y размытие растяжение цвет)

Добавляет тень к элементу, аналогичен CSS свойству box-shadow. Поясним значения параметров:

x, y — обязательные значения, отвечает за смещение тени по горизонтали/вертикали относительно элемента. Положительная величина задает сдвиг тени вправо/вниз, отрицательная — влево/вверх соответственно.

размытие — третий (необязательный) параметр, задается в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать большее размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (края тени четкие).

растяжение — необязательный параметр, измеряется в пикселях. Положительное значение заставит тень расширяться, а отрицательное — сжиматься. Если не указано, то будет 0 (тень будет иметь тот же размер, как элемент).

цвет — необязательный параметр, отвечает за цвет тени. Если не указано, цвет зависит от браузера (часто черного цвета).

В качестве примера создадим тень красного цвета, которая будет по 8 пикселей в толщину по горизонтали и по вертикали, с размытием, равным 10px:

Придает картинке оттенки серого цвета. 0% (или 0) – значение по умолчанию, и оно показывает картинку без изменений. 100% (или 1) сделает картинку полностью серой (используется для черно-белых изображений). Отрицательные значения не допустимы.

Позволяет изменять тон, повернув его (представьте колесо цветов, которые вы поворачиваете), измеряется в градусах. 0deg — минимальное, дефолтное значение; 360deg — максимальное значение.

Создает инверсию цветов в изображении. 0% (0 – значение по умолчанию, и оно показывает картинку без изменений). 100% сделает цвета картинки полностью обратно-инвертированными. Отрицательные значения не допустимы.

Устанавливает уровень непрозрачности для изображения, аналогичен CSS свойству opacity. При 0% (или 0 ) изображение полностью прозрачное. 100% (или 1 ) — значение по-умолчанию, при нем изображение непрозрачно. Отрицательные значения не допустимы.

Насыщает изображение. 0% (или 0 ) сделает изображение полностью ненасыщенными. 100% (или 1 ) — дефолтное значение, представляет собой исходное изображение. Значение более 100% увеличиет насыщенность. Отрицательные значения не допустимы.

Преобразует изображение в сепию. 0% (или 0 ) — минимальное и дефолтное значение, представляющее собой исходное изображение. Максимальное значение — 100% (или 1 ).

Функция url() обращается к месту расположения XML-файла, который указывает SVG-фильтр, а также может прикрепляться к одному конкретному элементу фильтра. Например:

Эффекты CSS-фильтров

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами — это filter.

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

Фильтрация

Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur:

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

Яркость

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

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

Насыщенность измеряется в процентах.

Поворот тона

Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.

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

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

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

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% — это будет завершенная сепия, 0% — исходное изображение.

Поддержка браузерами

Webkit Mozilla Trident Presto
Размытие Экспериментальная Нет Нет Нет
Яркость
Насыщенность
Поворот тонов
Контрастность
Инверсия Только полная инверсия
Обесцвечивание Экспериментальная
Sepia

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Фильтры CSS эффектов для изображений

В материале представлены различные виды эффектов, которые появляются при наведении изображения, где задействованы разные стили фильтров на CSS. Что вероятно многие встречали на различных сайтах, где наводили курсор и видели оттенок серого размытия или метод масштабирования CSS3, который идет для свойства transform. Используя метод масштаба свойства transform, создается эффект наведение.

Ведь эта подборка эффектов, которые только появляются при наведении на изображение, это отличный способ отобразить авторские картинки, где закреплены за статьей или материалом, делая сам материал оригинальным. Различные эффекты, которые мы увидим в этой демонстрации, достигаются при помощи различных методов фильтра CSS, а также масштабирования CSS3, под свойства transform для основы.

Эффект наведения изображения с помощью фильтров CSS

Эффект наведения черно-белого изображения

Эффект наведения на изображение ZoomIn-ZoomOut

Эффект наведения ZoomIn-ZoomOut и черно-белого изображения

Эффект размытого изображения

Приступаем к установке:

#mevaod-maluegos <
width: 695px;
padding: 10px;
box-sizing: border-box;
margin: 20px auto;
overflow: hidden;
>

.pervaya-animatsiya <
width: 196px;
height: 196px;
margin: 7px;
float: left;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
>

.pervaya-animatsiya img <
width: 100%;
height: 100%;
border-radius: 50%;
>

/* черно-белый эффект навидение*/
.pervaya-animatsiya .snimok-1 <
filter: grayscale(1);
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-1 <
filter: grayscale(0);
transition: 0.5s ease-in-out;
>

/* эффект масштабирования */
.pervaya-animatsiya .snimok-2 <
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-2 <
transform: scale(1.2, 1.2);
transition: 0.5s ease-in-out;
>

/* увеличение и уменьшение масштаба изображения в черно-белом режиме */
.pervaya-animatsiya .snimok-3 <
filter: grayscale(1);
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-3 <
transform: scale(1.2, 1.2);
filter: grayscale(0);
transition: 0.5s ease-in-out;
>

/* эффект размытия */
.pervaya-animatsiya .snimok-4 <
filter: blur(4px);
transition: 0.5s ease-in-out;
>

.pervaya-animatsiya:hover .snimok-4 <
filter: blur(0);
transition: 0.5s ease-in-out;
>

/* медиа-запросы */
@media all and (min-width: 0px) and (max-width: 920px) <
#mevaod-maluegos <
width: 540px;
margin: 20px auto;
>
>

Вероятно многим такие эффекта знакомы, что теперь вы можете поставить на свой портал. Здесь представлено 4 анимационных эффекта, что больше нравится, где по умолчанию идет крайняя версия, где мы не видим снимок.

И только с наведением курсора он появляется в корректном обозначение, что можно в оригинальном виде посмотреть. Но только стоит убрать клик, как изображение автоматически становится, как изначально наблюдали.

Для достижения эффекта, так как хотите его видеть, то для этого все в CSS подписано, где и какой стиль отвечает за эффект, это класс snimok-под номером.

15 эффектов для изображений (используем только CSS3)

Здравствуйте, уважаемые читатели XoZbloga! В этой статье подготовлены 15 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии посетите демонстрационную страницу.

Установка

Перед тем, как приступить к созданию отдельных демонстраций, вот кусочек CSS, который устанавливает базовые правила для изображений.

* <
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
>

body <
background : #333 ;
>

.pic <
border : 10px solid #fff ;
float : left ;
height : 300px ;
width : 300px ;
margin : 20px ;
overflow : hidden ;

-webkit-box-shadow : 5px 5px 5px #111 ;
box-shadow : 5px 5px 5px #111 ;
>

border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden .

Масштабирование и панорамирование

Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.

Увеличение

Для начала мы сделаем так, что когда пользователь наводит курсор на изображение фотография увеличивается, оставаясь в пределах своих границ. Вот HTML :

Как Вы можете видеть здесь мы используем два класса pic и grow . Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.

/*GROW*/
.grow img <
height : 300px ;
width : 300px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.grow img : hover <
width : 400px ;
height : 400px ;
>

Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.

Уменьшение

Это абсолютно противоположный эффект. Изначально изображение в полноценном размере, а при наведении уменьшается до 300х300px. таким образом создается эффект сжатия.

/*SHRINK*/
.shrink img <
height : 400px ;
width : 400px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.shrink img : hover <
width : 300px ;
height : 300px ;
>

Горизонтальное смещение

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

Изображение имеет размер 600х300px.

/*SIDEPAN*/
.sidepan img <
margin-left : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.sidepan img : hover <
margin-left : -200px ;
>

Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin . При наведении смещаем картинку влево на 200px.

Вертикальное смещение


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

Изображение имеет размер 300х600px.

/*VERTPAN*/
.vertpan img <
margin-top : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.vertpan img : hover <
margin-top : -200px ;
>

Теперь смещаем вверх на 200px.

Трансформация

Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше. Использоваться будет свойство transform — еще эффект с помощью transform.

Наклон

Замечательный эффект. Небольшой поворот изображения в результате наведения курсора мыши.

/*TILT*/
.tilt <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.tilt : hover <
-webkit-transform : rotate ( -10deg ) ;
-moz-transform : rotate ( -10deg ) ;
-o-transform : rotate ( -10deg ) ;
-ms-transform : rotate ( -10deg ) ;
transform : rotate ( -10deg ) ;
>

Все что нужно было, так это повернуть изображение на десять градусов. Просто и эффективно! Обратите внимание, что эффект нацелен на сам класс, а не на изображение.

Поворот

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

/*MORPH*/
.morph <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.morph : hover <
border-radius : 50% ;
-webkit-transform : rotate ( 360deg ) ;
-moz-transform : rotate ( 360deg ) ;
-o-transform : rotate ( 360deg ) ;
-ms-transform : rotate ( 360deg ) ;
transform : rotate ( 360deg ) ;
>

Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.

Фокусировка

Вот еще один подобный эффект. Однако вращения не будет просто изображение закруглим и увеличим толщину границы.

/*FOCUS*/
.focus <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.focus : hover <
border : 70px solid #000 ;
border-radius : 50% ;
>

При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.

Фильтры изображений

На последок рассмотрим применение фильтров изображений. В отличие от приведенных выше примеров, каждый из которых используется несколько префиксов, чтобы обеспечить максимальную совместимость браузера, в филтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.

Размытие

Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.

/*BLUR*/
.blur img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.blur img : hover <
-webkit-filter : blur ( 5px ) ;
>

Как вы можете видеть, мы используем -webKit-filter , с размытием 5px.

Черно-белое изображение

С помощью этого фильтра, добьемся эффекта черно-белого изображения.

/*B&W*/
.bw <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.bw : hover <
-webkit-filter : grayscale ( 100% ) ;
filter : grayscale ( 100% ) ;
>

Здесь я установил оттенки серого ( grayscale ) со значением 100%. Процент оттенков серого можно понизить.

Осветление

Теперь поиграем яркостью изображения. Сначала затемним картинку, а при наведении вернем нормальное значение для яркости.

/*DARKEN*/
.brighten img <
-webkit-filter : brightness ( 65% ) ;
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.brighten img : hover <
-webkit-filter : brightness ( 145% ) ;
>

Изначально яркость делаем 65%, а при наведении устанавливаем значение 145% т.е. ярче на 45% от нормального состояние картинки.

Сепия

Еще один ретро эффект) перевод цветного изображения в тональность сепия.

/*SEPIA*/
.sepia img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.sepia img : hover <
-webkit-filter : sepia ( 100% ) ;
>

Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию.

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

Теперь контрастность. На мой взгляд самый классный фильтр, можно управлять насыщенностью цветов в изображении.

/*CONTRAST*/
.contrast img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

Мастер Йода рекомендует:  Такой разный color input межбраузерный кошмар перфекциониста

.contrast img : hover <
-webkit-filter : contrast ( 185% ) ;
>

Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.

Оттенок изображения

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

/*HUE_ROTATE*/
.hue-rotate img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.hue-rotate img : hover <
-webkit-filter : hue-rotate ( 65deg ) ;
>

Значение оттенка изображения задается в градусах от 0-360, где 0 это нормальное значение.

Инверсия

Еще один Webkit фильтр изображений — это инверсия.

/*INVERT*/
.invert img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.invert img : hover <
-webkit-filter : invert ( 100% ) ;
>

Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

Также мы можем объединить фильтры в одном правиле. Получается более комплексный эффект для изображения. Например сделать картинку черно-белой и добавить контрастности:

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

Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже.

/*OPACITY*/
.opacity img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.opacity img : hover <
-webkit-filter : opacity ( 25% ) ;
>

Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

При таком варианте использование значение берется из интервала от 1 до 0.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

CSS3 фильтры: изменяем изображения используя стили. Эффекты CSS-фильтров

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Скачать файл-заготовку можно по .

Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут.

1. Фильтр размытие — blur

Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость — brightness

Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.

А вот и наш подопытный конь:

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% — оригинальным, а при 200% — станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность — contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% — это значение по умолчанию. 0% — черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.

4. Фильтр насыщенность — saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение — 200%. Повысим насыщенность нашей картиночки в 2 раза.

Море стало заметно приятнее:

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??

5. Фильтр прозрачность — opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

Посмотрите, что вышло:

6. Фильтр Инверсия — invert

Он позволяет вам «переворачивать» цвета. На значения данного фильтра также вводятся ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

В нашем случае установим максимальное значение — 100 %:

И красивая спортивная машина лёгким движением руки превращается в.

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия — sepia

Он позволит вам изменить цвет, добавив оттенок сепия. То есть вы получите имитацию старой фотографии. На значения фильтра ограничения указываются те же самые, что и в двух предыдущих.

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Ну что? Попробуемс?

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.

В нашем случае мы указали дробное значение — 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого — grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 — к 100%.

Зададим значение — 0.7 (или 70%):

CSS Filters были созданы для получения различных визуальных эффектов при применении их к DOM элементам. В данной статье мы поговорим об истории фильтров, о том, что они делают и как их применять. Так же рассмотрим их влияние на производительность как на десктопах, так и на мобильных устройствах.

Прошлое, настоящее и будущее фильтров

Фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. Со временем интернет-браузеры были наделены поддержкой SVG и полезность фильтров стала очевидна. Robert O’Callahan из Mozilla описал идею применения SVG фильтров к элементам DOM с помощью описания их в CSS. Он создал пример в котором показал насколько проще может быть применение SVG эффектов в комбинации с CSS. Рабочие группы CSS и SVG объединились и создали новое CSS свойство filter . Документация по данной спецификации находится .

Новая жизнь свойства «filter»

Порой просматривая CSS код какой-либо странички в интернете вы не редко натыкаетесь на данное свойство. Но в большинстве случаев это свойство записано для старых версий Internet Explorer, оно управляет некоторыми эффектами, реализованными в браузере. Свойство это было опущено в пользу стандартного, которое уже сейчас является частью спецификации CSS3.

Как работают фильтры

Что же делают фильтры? Можно представить себе что это некий постпроцесс, который творит чудеса с элементами на странице уже после того как они были отрисованны.

Загружая веб-страницу, браузер создает ее макет, применяет стили и на конечном этапе рендерит ее. Фильтры применяются после всех этих операций, но до того, как отрисованная страница попадет на экран. Они обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру чтобы отрисовать станицу.

Описание фильтров с помощью SVG и CSS

Существует несколько способов описания и применения фильтров. Сам по себе SVG является элементом, в котором фильтры описываются с помощью синтаксиса XML. Описание фильтров используя CSS стили дает тот же результат, но благодаря синтаксису CSS этот способ является много проще.

Большинство стандартных CSS фильтров могут быть описаны и с помощью SVG, так же CSS позволяет ссылаться на фильтры описанные в SVG формате. Здесь мы поговорим только о фильтрах доступных в CSS.

Как использовать СSS Filters

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

Данный пример изменит цвет контента находящегося внутри тега на ч/б.

Каждый фильтр имеет параметр который позволяет изменять силу действия фильтра.

Можно применять несколько фильтров одновременно.

Какие фильтры доступны для использования в CSS

Конвертирует цвета в ч/б. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Создает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Управляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).

Инвертирует цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Задает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Данный фильтр работает так же как и CSS свойство opacity . Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.

Изменяет яркость изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

Создает эффект размытости. Значение задается в пикселях (px).

drop-shadow(x, y, радиус, цвет)

Создает тень аналогично CSS свойству box-shadow , но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

Drop-shadow(16px 16px 20px black);

Filter: drop-shadow(inset 0 0 2rm blue);

Можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id .

custom (coming soon)

В скором будущем станет доступна возможность создавать свои собственные фильтры с помощью CSS Shaders .

Производительность

CSS Filters дают отличные визуальные эффекты, но в то же время негативно влияют на производительность вашего веб-сайта. Важно понять что они делают и как это влияет на производительность.

Большинство фильтров работают довольно быстро на любом устройстве поддерживающем их. Однако фильтры blur и drop-shadow , использующие эффект размытости, работают намного медленнее остальных. Как именно они работают?

Когда вы применяете фильтр blur , он смешивает цвета пикселей вокруг каждого пикселя, таким образом создавая эффект размытости. Например, если задан радиус 2px , то фильтр будет выбирать по два пикселя во всех направлениях и смешивать их цвета и так для каждого пикселя. Чем больше радиус, тем больше времени нужно на расчет эффекта. Так как фильтр выбирает пиксели во всех направлениях, то при увеличении радиуса размытости в 2 раза количество пикселей возрастает в 4 раза. Это означает, что времени на расчет потребуется ровно в 4 раза больше. Фильтр drop-shadow содержит в себе фильтр blur .

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

При использовании кастомных SVG фильтров убедитесь что они не содержат в себе эффектов, которые могут негативно влиять на производительность.

Совместимость

Большинство CSS фильтров сейчас доступны для использования в браузере FireFox и браузерах на движке WebKit. В скором времени надеемся увидеть поддержку в браузерах Opera и IE10. Так как спецификация все еще находится в разработке, приходится использовать вендорные префиксы. Для WebKit -webkit-filter , для FireFox префикс не требуется.

Ниже приведена таблица совместимости фильтров с браузерами.

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами — это filter .

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

Webkit-filter: filter(value) ;
-moz-filter: filter(value) ;
-o-filter: filter(value) ;
-ms-filter: filter(value) ;

Фильтрация

Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur :

filter: blur(5px ) brightness(0.5 ) ;

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

filter: blur(5px ) ;
// Browser Specific
-webkit-filter: blur(5px ) ;
-moz-filter: blur(5px ) ;
-o-filter: blur(5px ) ;
-ms-filter: blur(5px ) ;

Яркость

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

filter: brightness(0.2 ) ;
// Browser Specific
-webkit-filter: brightness(0.2 ) ;
-moz-filter: brightness(0.2 ) ;
-o-filter: brightness(0.2 ) ;
-ms-filter: brightness(0.2 ) ;

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

Насыщенность измеряется в процентах.

filter: saturate(50% ) ;
// Browser Specific
-webkit-filter: saturate(50% ) ;
-moz-filter: saturate(50% ) ;
-o-filter: saturate(50% ) ;
-ms-filter: saturate(50% ) ;

Поворот тона

Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.

filter: hue-rotate(20deg) ;
// Browser Specific
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: hue-rotate(20deg) ;
-o-filter: hue-rotate(20deg) ;
-ms-filter: hue-rotate(20deg) ;

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

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

filter: contrast(150% ) ;
// Browser Specific
-webkit-filter: contrast(150% ) ;
-moz-filter: contrast(150% ) ;
-o-filter: contrast(150% ) ;
-ms-filter: contrast(150% ) ;

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

filter: invert (100% ) ;
// Browser Specific
-webkit-filter: invert (100% ) ;
-moz-filter: invert (100% ) ;
-o-filter: invert (100% ) ;
-ms-filter: invert (100% ) ;

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

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

filter: grayscale(100% ) ;
// Browser Specific
-webkit-filter: grayscale(100% ) ;
-moz-filter: grayscale(100% ) ;
-o-filter: grayscale(100% ) ;
-ms-filter: grayscale(100% ) ;

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% — это будет завершенная сепия, 0% — исходное изображение.

filter: sepia(100% ) ;
// Browser Specific
-webkit-filter: sepia(100% ) ;
-moz-filter: sepia(100% ) ;
-o-filter: sepia(100% ) ;
-ms-filter: sepia(100% ) ;

Поддержка браузерами

Webkit Mozilla Trident Presto
Размытие Экспериментальная Нет Нет Нет
Яркость
Насыщенность
Поворот тонов
Контрастность
Инверсия Только полная инверсия
Обесцвечивание Экспериментальная
Sepia

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

Раньше для изменения, например, яркости/контрастности изображения для сайта, использовались фильтры различных графических редакторов. Эти времена уже в прошлом, сейчас данные эффекты можно реализовать при помощи свойств и параметров технологии CSS3.

Filter — свойство каскадных таблиц стилей CSS3, применяемое для изменения цветовой гаммы изображений. В основном используется с префиксом -webkit- .

К сожалению, данное CSS3 свойство не поддерживается устаревшими браузерами. Со списком поддерживаемых браузеров Вы можете ознакомиться .

1. Grayscale — серый оттенок (черно-белый фильтр)

Для создания эффекта «черно-белого фильтра» используется параметр grayscale , которому применяется значение от 0 — 100%.

2. Sepia — светло-коричневый оттенок (сепия фильтр)

Для создания эффекта «светло-коричневого фильтра» используется параметр sepia , которому применяется значение от 0 — 100%.

Для создания эффекта «фильтра яркости» используется параметр brightness , которому применяется значение от 0 до больших показателей (в процентах).

Например, при 0% изображение будет черным, при 100% — будет использоваться исходная яркость изображения, при 200% — яркость увеличится в 2 раза.

4. Contrast — фильтр контрастности

Фильтр контрастности регулирует разницу между темными и светлыми тонами изображения. Используется параметр contrast , применяется значение от 0 до больших показателей (в процентах).

При 0% изображение будет черным, при 100% — будет использоваться исходный контраст изображения, при 150% — контрастность увеличится в 1,5 раза.

Фильтр насыщенности придает изображению более сочный и насыщенный вид. Используется параметр saturate , применяется значение от 0 до больших показателей (в процентах).

При 0% изображение становится черно-белым (аналог фильтра grayscale), при 100% — будет использоваться исходная насыщенность изображения, при 200% — насыщенность увеличится в 2 раза.

Инверсия цветов — изменения цветовой гаммы изображения на противоположный по спектру.

За работу фильтра отвечает параметр invert , применяется значение от 0 до 100%.

Данный фильтр меняет угол цвета, основываясь на «цветовом колесе», и смещает его на указанное значение в градусах.

За работу фильтра отвечает параметр hue-rotate , применяется значение от 0 до 360 градусов (deg).

Создает эффект размытия изображения. Суть работы фильтра заключается в определении количества пикселей в радиусе, которые будут сливаться друг с другом (чем больше параметр, тем больше размытие)

За работу фильтра отвечает параметр blur , значение задается в пикселях (px).

Фильтр регулирует уровень прозрачности изображения.

За работу отвечает параметр opacity , значение задается от 0 — 100%. При значении в 10% изображение будет еле видно, при 100% — прозрачности не будет.

Как сделать анимацию при наведении (как в демо примерах)?

HTML разметка

CSS разметка

Исходя из демо примера, изображение в статичном состоянии находится уже в размытом состоянии, при наведении оно становится четким, т.е. размытие деактивируется. Исходя из этого получаем следующие стили:

Мастер Йода рекомендует:  Набор в школу IT-менеджеров

CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.

Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

HTML5 Rocks

Localizations

This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects.

Introduction

Filters are a powerful tool that web authors can use to achieve interesting visual effects. In this article we’ll cover the history of filter effects, what they do and how to use them. We’ll cover examples of all the predefined filters defined for CSS with some examples. We’ll also cover performance considerations for using them on desktop and mobile devices since knowing the speed impact of filters is important for a good user experience. Finally we’ll review the current state of implementation in modern browsers.

The past, present and future of filter effects

Filter effects originated as part of the Scalable Vector Graphics (SVG) specification. They were created to apply a number of different pixel based image effects to a vector drawing. Over time as browser vendors added SVG capabilities into their browsers, the usefulness of filters became evident. Robert O’Callahan from Mozilla came up with the brilliant idea of using SVG filters through the application of CSS to ‘normal’ HTML content. Robert prototyped an early version that showed how powerful the combination of filters and CSS styling could be. The CSS and SVG working groups in the W3C decided to harmonize the use of filters for both HTML and SVG via CSS styling, and thus the ‘filter’ property for CSS was born. Right now a joint task force of people working on CSS and SVG is doing a ton of work to make filters universally useful. You can find the current specification for all this stuff here.

A new life for the ‘filter’ CSS property

Deja Vu sometimes strikes a web developer when seeing ‘filter’ in CSS styles. This is due to the fact that old versions of Internet Explorer had a ‘filter’ property exposed via CSS to perform some platform specific functionality. This has been deprecated in favor of the standard ‘filter’ property which is now part of CSS3. So when you see ‘filter’ out in the wild on some old web pages, there’s no need to be confused. The new ‘filter’ property is where all the action is, and new versions of IE are implementing it just the same as all modern browsers.

How filters work

So what does a filter do exactly? The easiest way to think of a filter is as a post processing step that does something magical after all your page content has been laid out and drawn.

When a browser loads a web page it needs to apply styles, perform layout and then render the page so there’s something to look at. Filters kick in after all those steps and just before the page is copied to the screen. What they do is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image. One way to think of them is like a filter placed on the front of a camera lens. What you’re seeing through the lens is the outside world modified by the effect of the filter.

This of course means that there’s time consumed when drawing a page with filters on it, but using them properly will have minimal impact on the speed of your site.

Also, just as you can stack a number of filters in front of each other on your camera lens, you can apply an arbitrary number of filters one after the other to achieve all sorts of effects.

Filters defined using SVG and CSS

Since filters originally came from SVG there are different ways to define and use them. SVG itself has a element that wraps up definitions of various filter effects using XML syntax. The set of filters defined by CSS take advantage of the same graphics model, but they are much simpler definitions that are easy to use in a style sheet.

Most of the CSS filters can be expressed in terms of SVG filters, and CSS also allows you to reference a filter specified in SVG if you want. The CSS filter designers have taken great pains to make the application of a filter easier for web authors, and so this article will just cover the filters available directly from CSS, ignoring the SVG definitions for the time being.

How to apply a CSS filter

Note: The description and examples below use the official W3C syntax that will be available in all modern browsers eventually. To use filters now, you need to use the vendor prefixed version of the ‘filter’ property. But don’t worry there’s an easy way to handle that at the end of this article.

Using filters from CSS is done by using the ‘filter’ property applied to any visible element on your web page. For a very simple example you could write something like

and that would make the content inside all

Original image. Grayscale filtered image.

Most filters take some form of parameter to control how much filtering is done. So for example if you wanted to style your content to be half way between the original color and a grayscale version you’d do it like this:

Original image above but 50% gray filtered.

If you want to apply a number of different filters one after another, it’s easy — just place them in order in your CSS like so:

That example will first make all the original color grayscale and then apply a sepia effect, and would end up looking like:

With the flexibility available for applying filters one after the other, all sorts of effects can be achieved — it’s totally up to your imagination to experiment with creating amazing results.

What filters effects are available using CSS

So the original SVG filter mechanism is both powerful but at the same time can be daunting to use. Because of that, CSS introduces a bunch of standard filter effects that make using them really easy.

Let’s take a look at each of them and see what they do.

This converts color in our input image to a shade of gray. The ‘amount’ applied controls how much gray conversion is applied. If it’s 100% then everything will be a shade of gray, if it’s 0% the colors are unchanged. You can use a floating point number here if you prefer it over percentages, i.e. 0 works the same as 0% whilst 1.0 works the same as 100%.

This gives the colors passed in a sepia tinge like in old photographs. The ‘amount’ applied works in the same way as for the ‘grayscale’ filter — namely 100% makes all the colors completely sepia toned and smaller values allow the effect to be applied in smaller proportions.

This applies a color saturation effect to the colors which makes them look more vivid. It’s a cool effect that can make photos look like posters or cartoons.This effect also allows you to use a value greater than 100% to really emphasize the saturation. Definitely an effect that can make things look pretty funky!

Note: In Chrome version 19, the saturate() function takes an integer (without the percentage sign) instead of the decimal or percentage, as per the W3C spec. Not to worry, this known bug will be fixed. hue-rotate(angle)

This one is a bit of a color geek effect that can be used for interesting results. What it does is shift the colors around to make an input image look completely different. If you can imagine a color spectrum going from red to violet around a color wheel, then this effect takes the original color on the wheel as input and rotates it by the ‘angle’ parameter to produce the color on the wheel to which it rotated as the output color value. So all the colors in the image are shifted by the same ‘angle’ on the wheel. This is of course a simplification of what it does, but hopefully close enough that it makes sense.

This effect flips the colors — so that if the ‘amount’ applied is 100% the output looks like a photo negative back from the old film days of cameras! Just like before, using values smaller than 100% will progressively apply the invert effect.

If you want the content being filtered to look semi-transparent, this is the one for you. The ‘amount’ value defines how opaque the output will be. So a value of 100% is completely opaque so the output will be exactly the same as the input. As the value drops below 100% the output image will become less opaque (more transparent) and you’ll see less and less of it. This of course means if it overlaps something else on the page, the stuff underneath will start to become visible. An ‘amount’ of 0% means it will completely disappear — but note, you can still get events like mouse clicks etc. to happen on completely transparent objects so this is handy if you want to create clickable areas without displaying anything.

This works the same as the ‘opacity’ property you already know. In general the CSS ‘opacity’ property isn’t hardware accelerated, but some browsers that implement filters using hardware acceleration will accelerate the filter version of opacity for much better performance.

This is just like the brightness control on your TV. It adjusts the colors between completely black and the original color in proportion to the ‘amount’ parameter. If you set this one to 0% you’ll see nothing but black, but as the value goes up towards 100% you see more and more of the original image brightening up, until you hit 100% where it’s the same as the input image. Of course you can just keep going — so setting something like 200% will make the image twice as bright as the original — great for adjusting those low light shots!

More controls from your TV set! This will adjust the difference between the darkest and lightest parts of the input image. If you use 0% you end up with black just like with ‘brightness’, so not too interesting. However as you increase the value towards 100% the difference in darkness changes until you hit 100% and it’s the original image again. You can also go beyond 100% for this effect too, which increases the difference between light and dark colors even more.

If you want a soft edge for your content, you can add a blur. This one looks like the classic Vaseline on a sheet of glass look that used to be a popular movie making technique. It smudges all the colors together and spreads their effect out — kind of like when your eyes are out of focus. The ‘radius’ parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.

It’s so nice to be able to make your content look like it’s outside in the sun with a shadow on the ground behind it, and that of course is what ‘drop-shadow’ does. It takes a snapshot of the image, makes it a single color, blurs it, then offsets the result a bit so it looks like a shadow of the original content. The ‘shadow’ parameter passed in is a bit more complicated than just a single value. It is a series of values separated by a space — and some values are optional too! The ‘shadow’ values control where the shadow is placed, how much blur is applied, the color of the shadow, etc. For full details of what the ‘shadow’ values do, the CSS3 Backgrounds specification defines ‘box-shadow’ in great detail. A few examples below should give you a decent idea of what the various possibilities are.

drop-shadow(16px 16px 20px black) drop-shadow(10px -16px 30px purple)

This is another filter operation that is similar to existing CSS functionality available via the ‘box-shadow’ property. Using the filter approach means that it may get hardware accelerated by some browsers as we described for the ‘opacity’ operation above.

url referencing SVG filters

Since filters originated as part of SVG, it’s only logical that you should be able to style your content using an SVG filter. This is easy with the current ‘filter’ property proposal. All filters in SVG are defined with an ‘id’ attribute that can be used to reference the filter effect. So, to use any SVG filter from CSS all you need to do is reference it using the ‘url’ syntax.

For example, the SVG markup for a filter could be something like:

then from CSS you could do something as simple as:

and voila! All the

custom (coming soon)

Coming soon on the horizon are custom filters. These tap into the power of your graphics GPU to use a special shading language to perform amazing effects bounded only by your own imagination. This part of the ‘filter’ specification is still under discussion and in flux, but as soon as this starts to come to a browser near you, we’ll be sure to write more about what is possible.

Performance considerations

One thing that every web developer cares about is performance of their web page or application. CSS filters are a powerful tool for visual effects, but at the same time might have an impact on the performance of your site.

Understanding what they do and how this affects performance matters, especially if you want your site to work well on mobile devices if they support CSS filters.

Firstly, not all filters are created equal! In fact, most filters will run really quickly on any platform and have very minor performance impact. However, filters that do any kind of blurring tend to be slower than the others. This of course means ‘blur’ and ‘drop-shadow’. This doesn’t mean you shouldn’t use them but understanding how they work might help.

When you do a ‘blur’, it mixes the colors from pixels all around the output pixel to generate a blurred result. So, say if your ‘radius’ parameter is 2, then the filter needs to look at 2 pixels in every direction around each output pixel to generate the mixed color. This happens for each output pixel, so that means a lot of calculations that just get bigger when you increase the ‘radius’. Since ‘blur’ looks in every direction, doubling the ‘radius’ means you need to look at 4 times as many pixels so in fact it’s 4 times slower for each doubling of the ‘radius’. The ‘drop-shadow’ filter contains a ‘blur’ as part of its effect, so it too behaves just like ‘blur’ when you change the ‘radius’ and ‘spread’ parts of the ‘shadow’ parameter.

All is not lost with ‘blur’ since on some platforms it’s possible to use the GPU to accelerate it, but that’s not necessarily going to be available in every browser. When in doubt the best thing is to experiment with the ‘radius’ that gives you the effect you want, then try to reduce it as much as possible while still maintaining an acceptable visual effect. Tuning this way will make your users happier especially if they use your site from a phone.

If you’re using ‘url’ based filters that reference SVG filters, they can contain any arbitrary filter effect so be aware that they too could be slow, so try to make sure you know what the filter effect does and experiment on a mobile device to make sure the performance is OK.

Availability in modern browsers

Right now a number of the CSS ‘filter’ effects are being made available in WebKit based browsers and Mozilla. We expect to see them soon in Opera as well as IE10. As the specification is still under development, some browser vendors have implemented this stuff using vendor prefixes. So in WebKit you need to use ‘-webkit-filter’, in Mozilla you will need to use ‘-moz-filter’ and keep your eye out for other browser implementations as they appear.

Not all browsers will support all filter effects right away, so your mileage will vary. Presently, the Mozilla browser supports only the ‘filter: url()’ function — without the vendor prefix, as that implementation pre-dates the other effects functions.

We’ve summarized the CSS filter effects available in the various browsers below with rough performance indicators for when they’re implemented in software. Note, that a number of modern browsers are beginning to implement these in hardware (GPU accelerated). When these are built with GPU support, performance will be greatly improved for the slower effects. As usual, testing on different browsers is the best way to evaluate the performance.

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