Ещё один простой блог в интернете, одного из жителей Сызрани, который считает себя дизайнером, WEB-мастером и фотографом-любителем

просто блог

QR CODE для записиQR CODE для записи “Webkit Filter Effects — CSS3 фильтры для изображений”

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

Начать прослушивание EnyaOnly Time (Album Version) [Only Time (single) (2000)]

В конце прошлого года была представлена новая спецификация — 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="Собачка">

Собачка

Внимание! Публичные версии браузеров еще не поддерживают эти эффекты, поэтому для тестов рекомендуется скачать Google Chrome Canary.

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

Оттенок: hue-rotate

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

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

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

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

Привью-webkit-filter: hue-rotate(50deg);Демо-webkit-filter: hue-rotate(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); }
}
ДемоadjustHue

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

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

img {
	-webkit-filter: grayscale(100%);
}
Привью-webkit-filter: grayscale(100%);Демо-webkit-filter: grayscale(100%);

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

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

img {
	-webkit-transition: -webkit-filter 1s;
}
img:hover {
	-webkit-filter: grayscale(100%);
}
Демоgrayscale_anim

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

Сепия: sepia

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

img {
	-webkit-filter: sepia(100%);
}
Привью-webkit-filter: sepia(100%);Демо-webkit-filter: sepia(100%);

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

ДемоПросто фото

Размытие: blur

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

img {
	-webkit-filter: blur(2px);
}
Привью-webkit-filter: blur(2px);Демо-webkit-filter: blur(2px);

Яркость: brightness

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

img {
	-webkit-filter: brightness(15%);
}
Привью-webkit-filter: brightness(15%);Демо-webkit-filter: brightness(15%);

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

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

img {
      -webkit-filter: brightness(60%) sepia(100%);
}
Привью-webkit-filter: brightness(60%) sepia(100%);Демо-webkit-filter: brightness(60%) sepia(100%);

Контраст: contrast

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

img {
      -webkit-filter: contrast(200%);
}
Привью-webkit-filter: contrast(200%);Демо-webkit-filter: contrast(200%);

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

img {
      -webkit-filter: contrast(0%);
}
Привью-webkit-filter: contrast(0%);Демо-webkit-filter: contrast(0%);

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

img {
      -webkit-filter: contrast(2000%);
}
Привью-webkit-filter: contrast(2000%);Демо-webkit-filter: contrast(2000%);

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

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

@-webkit-keyframes bluePill {
   0% { -webkit-filter: contrast(2000%); }
   100% { -webkit-filter: contrast(100%); }
}
Демо-webkit-animation

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

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

img {
      -webkit-filter: invert(100%);
}
Привью-webkit-filter: invert(100%);Демо-webkit-filter: invert(100%);

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

Привью-webkit-filter: invert(100%);

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

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

img {
      -webkit-filter: saturate(0%);
}
Привью-webkit-filter: saturate(0%);Демо-webkit-filter: saturate(0%);

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

img {
      -webkit-filter: saturate(700%);
}
Привью-webkit-filter: saturate(700%);Демо-webkit-filter: saturate(700%);

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


  1. valera5505 # link

    на Beta тоже работает :D

  2. BaNru # link

    Ну так с учетом давности статьи — уже возможно и запустили в BETA версии. Я так и написал в статье, что скоро и стабильных версиях появится. И в FF с Оперой скорее всего через 1-2 месяца.

    И браузеры основанные на Webkit движке уже имеют поддержку (пока ночнушки — nightlies). Но можно быть уверенным, что в ближайшее время подтянуться и все остальные браузеры.

  3. Евгений # link

    Спасибо за статью! Очень помогла с grayscale, а то я по незнанию уже в JQuery полез )

Оставить комментарий

В блоге включена ручная модерация комментариев. Нет смысла повторно отправлять комментарий.
Поля отмеченный звездочкой * обязательны к заполнению

Перед отправкой формы: