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

Всем привет!
Сегодня я покажу, как можно изменить графический рисунок на сайте, не используя графических редакторов. То есть, с помощью особого фильтра на CSS3 вы сможете в коде прописать несколько строк, и тем самым сделать изображение размытым, ярким, насыщенными, контрастным или вообще обесцветить его.

Вот макет, по которому можно менять и добавлять фильтры к изображению:

filter: filter-x(xxx);

filter-x – сюда подставляем любой нужный фильтр (контрастность, яркость и т.д)
xxx – здесь указываем параметры в % или px для регулировки эффекта.

Чтобы эффект отображался и на других браузерах, рекомендую использовать дополнение:

-webkit-filter: filter-х(ххх);
-moz-filter: filter-х(ххх);
-o-filter: filter-х(ххх);
-ms-filter: filter-х(ххх);

В итоге будет вот такой макет:

filter: filter-x(xxx);
/* для других браузеров */
-webkit-filter: filter-х(ххх);
-moz-filter: filter-х(ххх);
-o-filter: filter-х(ххх);
-ms-filter: filter-х(ххх);

Приступим!!!

Пропишите в HTML вот такой код:

<img src="kartinka.png" class="img-filter">

РАЗМЫТИЕ

.img-filter
{
filter: blur(2px);
/* для других браузеров */
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}

В результате:

ЯРКОСТЬ

.img-filter
{
filter: brightness(2);
/* для других браузеров */
-webkit-filter: brightness(2);
-moz-filter: brightness(2);
-o-filter: brightness(2);
-ms-filter: brightness(2);
}

В результате:

НАСЫЩЕННОСТЬ

.img-filter
{
filter: saturate(40%);
/* для других браузеров */
-webkit-filter: saturate(40%);
-moz-filter: saturate(40%);
-o-filter: saturate(40%);
-ms-filter: saturate(40%);
}

В результате:

ТОН

.img-filter
{
filter: hue-rotate(60deg);
/* для других браузеров */
-webkit-filter: hue-rotate(60deg);
-moz-filter: hue-rotate(60deg);
-o-filter: hue-rotate(60deg);
-ms-filter: hue-rotate(60deg);
}

В результате:

КОНТРАСТНОСТЬ

.img-filter
{
filter: contrast(300%);
/* для других браузеров */
-webkit-filter: contrast(300%);
-moz-filter: contrast(300%);
-o-filter: contrast(300%);
-ms-filter: contrast(300%);
}

В результате:

ИНВЕРСИЯ

.img-filter
{
filter: invert(100%);
/* для других браузеров */
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}

В результате:

ОБЕСВЕЧИВАНИЕ (ЧЕРНО-БЕЛОЕ ИЗОБРАЖЕНИЕ)

.img-filter
{
filter: grayscale(100%);
/* для других браузеров */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}

В результате:

СЕПИЯ

.img-filter
{
filter: sepia(90%);
/* для других браузеров */
-webkit-filter: sepia(900%);
-moz-filter: sepia(900%);
-o-filter: sepia(900%);
-ms-filter: sepia(900%);
}

В результате:

ДОПОЛНЕНИЕ:

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

КОМБИНИРОВАНИЕ ФИЛЬТРОВ

.img-filter
{
filter: grayscale(10%) contrast(20%);
/* для других браузеров */
-webkit-filter: grayscale(10%) contrast(20%);
-moz-filter: grayscale(10%) contrast(20%);
-o-filter: grayscale(10%) contrast(20%);
-ms-filter: grayscale(10%) contrast(20%);
}

ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КАРТИНКУ МЫШКИ

img:hover
{
filter: grayscale(100%);
// Browser Specific
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}

Вот в этой статье есть красивые эффекты для картинок, используя вот эти все фильтры.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, для сайта, эффекты для сайта