Всем привет!
Сегодня я покажу, как можно изменить графический рисунок на сайте, не используя графических редакторов. То есть, с помощью особого фильтра на 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%); }
Вот в этой статье есть красивые эффекты для картинок, используя вот эти все фильтры.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222435 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187485 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
Добавить комментарий
Метки: css, для сайта, эффекты для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐