BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » CSS3 фильтры изображений

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

2016-12-13 / Вр:11:14 / просмотров: 3374

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);
}

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

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

ЯРКОСТЬ

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

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

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

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

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

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

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

ТОН

.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);
}

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

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

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

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

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

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

ИНВЕРСИЯ

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

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

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

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

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

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

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

СЕПИЯ

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

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

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

ДОПОЛНЕНИЕ:

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

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

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

 

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716