17.01.2012

Webkit Filter Effects — CSS3 фильтры для изображений

В конце прошлого года была представлена новая спецификация — Filter Effects 1.0. В этой спецификации было представлено несколько потрясающих фотошоп-подобных эффектов, которые мы можем использовать в нашем браузере. И браузеры основанные на Webkit движке уже имеют поддержку (пока ночнушки — nightlies). Но можно быть уверенным, что в ближайшее время подтянуться и все остальные браузеры.

По словам спецификации:

A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output.

Примерный перевод:

Фильтры эффектов графических операций (опций) применяется к элементу по мере его вывода в документе. Именно на основе базовых эффектов (image-based effect), которые применяются ноль или более раз на входящее изображение, по количеству параметров характерных для эффекта, происходит просчет конечного изображения.

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

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

<img src="http://blog.g63.ru/wp-content/themes/prosto_blog/img/dog128.png" alt="Собачка">

Демонстрация Webkit Filters 1.0

Оттенок: hue-rotate

Этот параметр аналогичный панели Hue / Saturation в Photoshop. Он позоляет менять оттенок изображения.

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

Указании этого значения в градусах кажется запутанным. Чтобы понять как оно работает — представьте себе, цветовой круг. Числовой параметр указывает на то, в каком месте останавливается курсор на окружности. Это означает, что при 0deg не будет применяться эффект, в то время как 50deg сместит позицию курсора.

Выше приведенный код добавит нашей картинке оттенки зеленого.

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

img {
	-webkit-animation: adjustHue 1s alternate infinite;
}

@-webkit-keyframes adjustHue {
	0% { -webkit-filter: hue-rotate(30deg); }
	50% { -webkit-filter: hue-rotate(60deg); }
	100% { -webkit-filter: hue-rotate(90deg); }
}

Градации (оттенки) серого: grayscale

Раньше для перехода от серого изображения к цветному мы использовали разные хаки. Один их методов — это делать две картинки друг над другом. Другой вариант — использовать CANVAS. Но теперь для этого появилась возможность использовать grayscale фильтр.

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

CSS3 фильтр grayscale указывается в процентах. Это как будто ползунок от 0 до 100. Чем больше число, тем более обесвеченное изображение мы получим.

Так же можно создать красивую и плавную анимацию при наведение курсора на картинку, используя CSS3 трансформацию (transition)

img {
	-webkit-transition: -webkit-filter 1s;
}
img:hover {
	-webkit-filter: grayscale(100%);
}

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

Сепия: sepia

Теперь сделать вашу фотографию под старину не составит труда. Для этого создан фильтр sepia.

img {
	-webkit-filter: sepia(100%);
}

Этот эффект очень красиво ложиться на фотографии. Посмотрите сами.

Размытие: blur

Передавая радиус, мы можем можем легко размыть наше изображение

img {
	-webkit-filter: blur(2px);
}

Яркость: brightness

При управление яркостью надо понимать, что 100% — это нормальная яркость, яркость по умолчанию. И чем меньше число, тем темнее получается изображение.

img {
	-webkit-filter: brightness(15%);
}

И наоборот, чем больше число, тем больше яркость. Что бы осветлить фотографию используйте числа больше 100%. Максимальное значение для данного эффекта равно 2000%.

Не забывайте! Вы можете комбинировать фильтры!

img {
      -webkit-filter: brightness(60%) sepia(100%);
}

Контраст: contrast

Так же как и с яркостью, у фильтра контраста 100% — это значение по умолчанию

img {
      -webkit-filter: contrast(200%);
}

Согласно спецификации фильтр contrast со значение 0% должен сделать изображение полностью черным, подобно тому, как делает это эффект -webkit-filter: brightness(0%);, но к сожалению на данный момент этого не происходит. Вместо черного квадрата Малевича изображения, отображается темно-серый цвет. Но думаю это малозначительная ошибка, которая при реальном использование навряд ли понадобиться, да и всегда для скрытия картинки можно будет применить фильтр яркости со значение 0%.

img {
      -webkit-filter: contrast(0%);
}

На данный момент получилось найти верхний порог контрастности и он равен 2000%, так же как и у brightness.

img {
      -webkit-filter: contrast(2000%);
}

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

img {
    -webkit-animation: bluePill 1s alternate infinite;
}

@-webkit-keyframes bluePill {
   0% { -webkit-filter: contrast(2000%); }
   100% { -webkit-filter: contrast(100%); }
}

Негатив, инвертирование: invert

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

img {
      -webkit-filter: invert(100%);
}

Пользователи MacOS наверное видели как инвертируются цвета при нажатие Control + Option + Command + 8. Этот трюк полезен для чтения ночью, когда от белого экрана начинают болеть глаза. Технически это можно применить и ко всей странице, однако это не рекомендуется делать, т.к. это создает большую нагрузку и прокрутка страницы может замедлиться.

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

С помощью этого фильтра мы может добится того же эффекта обесцвечивания, как и при фильтре grayscale(100%).

img {
      -webkit-filter: saturate(0%);
}

Или повысить насыщенность, например до 700%

img {
      -webkit-filter: saturate(700%);
}

---

Ссылки по теме:
Say Hello to Webkit Filters
Filter Effects 1.0

---