Гостевой вход

Вы не залогинились
16:33

Набор CSS-фильтров для изображений

Категория: Эффекты с изображениями

Метки: CSS-фильтры
В данном материале мы рассмотрим набор CSS-фильтров для изображений, которые позволят вам добиться над изображением таких результатов, которых раньше вы могли добиться, лишь используя программы графического редактирования, тот же Adobe Photoshop например.Сделать фото более или менее контрастным, разблёрить, создать эффект сепии, всё это можно сделать теперь, используя лишь CSS-технологии, небольшим фрагментом кода. Поехали!

Применение эффекта (определённого фильтра) к изображению достигается за счёт добавления этому изображению класса с определённым набором свойств. А именно:

Код
<img class="здесь название класса" src="здесь адрес изображения" alt="">

Различные классы и итоговый результат в таблице ниже.

 
№1

Black & White

Код
.bw {  filter: grayscale(100%);  -webkit-filter: grayscale(100%);  cursor:pointer; }
 
№2

Blur

Код
.blur {  filter: blur(3px);  -webkit-filter: blur(3px);  cursor:pointer;}
 
№3

Brighten

Код
.brighten {  filter: brightness(200%);  -webkit-filter: brightness(200%);  cursor:pointer;}
 
№4

Contrast

Код
.contrast {  filter: contrast(200%);  -webkit-filter: contrast(200%);  cursor:pointer;}
 
№5

Drop Shadow

Код
.drop {  filter: drop-shadow(8px 8px 10px grey);  -webkit-filter: drop-shadow(8px 8px 10px grey);  cursor:pointer;}
 
№6

Hue Rotate

Код
.hue {  filter: hue-rotate(90deg);  -webkit-filter: hue-rotate(90deg);  cursor:pointer;}
 
№7

Invert

Код
.invert {  filter: invert(100%);  -webkit-filter: invert(100%)  cursor:pointer;}
 
№8

Opacity

Код
.opacity1 {  filter: opacity(30%);  -webkit-filter: opacity(30%);  cursor:pointer;}
 
№9

Saturated

Код
.saturated {  filter: saturate(800%);  -webkit-filter: saturate(800%);  cursor:pointer;}
 
№10

Sepia

Код
.sepia {  filter: sepia(100%);  -webkit-filter: sepia(100%);  cursor:pointer;}
 
№11

Multiple

Код
.multiple {  filter: blur(2px) grayscale(0.5) opacity(0.8);  -webkit-filter: blur(2px) grayscale(0.5) opacity(0.8);  cursor:pointer;}

Просмотров: 75 | Скачиваний: 0 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: