Войти Регистрация

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). Это подобно колесу в фотошопе, которое вы можете вращать. Здесь, то же самое. Давайте посмотрим, какой получился эффект:

Филтьтр hue rotate

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

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%).

Фильтр greyscale

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

img {  

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

}  

img:hover {  

    -webkit-filter: grayscale(100%);  

}

Фильтр sepia

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

img {  

      -webkit-filter: sepia(100%);  

}

Фильтр sepia

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

Фото сепия

Фильтр blur

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

img {  

      -webkit-filter: blur(1px);  

}

Фильтр blur

Фильтр brightness

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

img {  

      -webkit-filter: brightness(55%);  

}

Фильтр brightness

Фильтр contrast

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

img {  

      -webkit-filter: contrast(200%);  

}

Фильтр contrast

Также можно сделать красивую анимацию, используя 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%);  

}

Фильтр invert

Фильтр saturate

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

img {  

      -webkit-filter: saturate(0%);  

} 
 

Выцветание

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

Выцветание

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

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

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

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

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


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


Дискуссия по теме     0 Комментариев
Добавить комментарий
Просмотров: 10200