Четверг, 22 Ноября 2012 09:25

WebKit фильтры - grayscale, sepia, saturate, hue-rotate, invert, brightness, contrast, blur

Written by 
Оцени эту запись
(1 Голос)

Нашла в сети интересную информацию о наличии CSS свойства -webkit-filter. Не смогла пройти мимо)) Давайте рассмотрим как можно изменить отображение изображения в браузере WebKit при помощи разных значений CSS свойства -webkit-filter.

 

Для наглядности применения WebKit фильтрами возьмем красивую картинку, любезно предоставленную мне участником граффити команды "Граффит" (другие работы команды можно посмотреть в портфолио):

 

WebKit фильтры

 

 

А теперь рассмотрим все интересные фильтры:

 

  • grayscale,
  • sepia,
  • saturate,
  • hue-rotate,
  • invert,
  • brightness,
  • contrast,
  • blur

 

Grayscale - эффект черно-белого фото. Согласно спецификации W3C данный фильтр может иметь значения от 0% до 100%, где 0% не покажет никаких изменений, а 100% сделает изображение полностью черно-белым. Причем, по умолчанию стоит значение 100%.

 

img {

-webkit-filter: grayscale(100%);

}

 

 

 

Следующий фильтр - sepia. Делает эффект старых фотографий. Аналогично grayscale, принимает значения от 0 до 100%. При значении 0 изображение остается без изменений, а при 100% - изменяет изображение в sepia. По умолчанию - 100%.

 

 

img {

-webkit-filter: sepia(100%);

}

 

 

 

Для разнообразия, попробуем применить эффект sepia при наведении на картинку:

 

 

img {

-webkit-transition: -webkit-filter 2s;

}

 

 

img:hover {

-webkit-filter: sepia(100%);

}

 

 

 

Идем дальше по списку. Фильтр saturate - насыщенность. По умолчанию параметр насыщенности равен 100%, при этом изображение не изменяется. При значении 0% - изображение становится черно-белым. При задании параметра меньше 100% изображение становится менее насыщенным, а при больше 100% - более насыщенным. Для иллюстрации работы фильтра попробуем задать насыщенность 50% и 200%.

 

 

img {

-webkit-filter: saturate(50%);

}

 

 

 

 

 

Следующий фильтр hue-rotate, который задает нам изменение оттенков изображения. Может принимать значения от 0 до 360 градусов. Представляет собой подобие разноцветного круга, в разных частях которого находятся разные цвета - аналог Hue / Saturation в Photoshop.

 

 

img {

-webkit-filter: hue-rotate(50deg);

}

 

 

 

 

Или так:

 

 

 

 

Фильтр invert - изображение с инверсией цвета. Может принимать значение параметра от 0% до 100%, где 0% ничего не меняет, а 100% выдает изображение с полной инверсией цвета. По умолчанию - 100%.

 

 

img {

-webkit-filter: invert(100%);

}

 

 

 

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

 

 

img {

-webkit-filter: brightness(50%);

}

 

 

 

Э, тут, короче, нюанс. В спецификации сказано "Values of amount over 100% are allowed, providing brighter results". Но играя со значениями фильтра, я вижу, что при 0% изображение неизменно, при -100% - черное, а при 100% - белое. То есть, отрицательные значения делают изображение темнее, а положительные - светлее. Возможно, это изменится со временем. Свойство то совсем новое...

 

Ладно, идем дальше. 

 

Contrast - задает контрастность изображения. Параметр задается в процентах, 100% не изменяет изображение, 0% делает его черным, а значение более 100% делает изображение менее контрастным.

 

 

img {

-webkit-filter: contrast(50%);

}

 

 

 

И последний фильтр - blur. Данный фильтр задает размытие изображения. Задается в пикселях, по умолчанию - 0px.

 

 

img {

-webkit-filter: blur(5px);

}

 

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов