CSS фильтры изображений, webkit фильтры для CSS

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

Для начала, маленькое введение в понятие WebKit. Webkit браузеры – это браузеры, которые поддерживают технологию webkit (бесплатная технология для отображения htmlстраниц). Полный список браузеров, которые поддерживают webkitcss фильтры можно посмотреть в википедии. Вот некоторые, наиболее известные: Safari, Chrome, AppleiOS, GoogleAndroidи другие.

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

Для начала мы создадим HTML файл, выведем изображение и будем тестировать css фильтры. У меня файл следующего содержания:

<img src=" http://sitear.ru/application/views/_res/images/logo.png " alt="sitear.ru logo">

Попрошу заметить, что данные фильтры новые и требуют проверки на кроссбраузерность. Для проверки работы кода, вам необходимо установить Google Chrome Canary (http://tools.google.com/dlpage/chromesxs).

Фильтр hue-rotate

Наверняка, вы работали с панелью насыщенности в Photoshop. Теперь это можно делать в браузере с помощью фильтра насыщенности hue-rotate.

img {  

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

}

 

Данный фильтр, принимает значения в градусах (50 degree, сокращенно deg). Это подобно колесу в фотошопе, которое вы можете вращать. Здесь, то же самое. Давайте посмотрим, какой получился эффект:

Также можно задавать анимацию, которая позволит меняться эффектам поочередности, вот пример кода.

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

Раньше мы использовали множество хаков, чтобы вывести изображение в браузер в черно-белом виде. Также, можно было создавать два изображения и применять свойство hover. Или использовать библиотеку Canvas. Теперь, эту проблему можно решить с помощью одной строки css кода и фильтра grayscale:

img {  

   -webkit-filter: grayscale(100%);  

}

 

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

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

img {  

  -webkit-transition: -webkit-filter 1s;  

}  

img:hover {  

    -webkit-filter: grayscale(100%);  

}

Фильтр sepia

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

img {  

      -webkit-filter: sepia(100%);  

}

Фильтр sepia, более красиво выглядит на фотографиях. Давайте посмотрим, как это будет выглядеть на моей фотографии.

Фильтр blur

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

img {  

      -webkit-filter: blur(1px);  

}

Фильтр brightness

Фильтр brightness (яркость), принимает значения в процентах. 100% - не меняет ничего, чем ниже, тем темнее будет изображение. Лучше применять этот эффект для фотографий.

img {  

      -webkit-filter: brightness(55%);  

}

Фильтр contrast

Подобно предыдущему фильтру, можно задавать контрастность изображения с помощью фильтра contrast. Изначальная позиция – это 100% (при этом на изображении, вы не увидите изменений). Рассмотрим, как можно применять этот фильтр:

img {  

      -webkit-filter: contrast(200%);  

}

Также можно сделать красивую анимацию, используя webkit фильтр контраста и CSS код:

img {  

    -webkit-animation: bluePill 1s alternate infinite;  

}  

  

@-webkit-keyframes bluePill {  

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

   100% { -webkit-filter: contrast(100%); }  

}

Фильтр invert

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

img {  

      -webkit-filter: invert(100%);  

}

Фильтр saturate

Ранее, мы применяли эффект grayscale(100%), такого же эффекта можно добиться применяя фильтр saturate(0%). Это фильтры антагонисты. Давайте посмотрим как работает фильтр насыщенности.

img {  

      -webkit-filter: saturate(0%);  

} 

 

Применяя значение 500% и более, мы получим следующий эффект:

Комбинирование фильтров

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

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

На сегодня все! Если остались вопросы по поводу использования webkit css фильтров изображений, можете писать в комментарии.

Дальше: Растянуть background на весь экран с помощью css, jquery, php