Главная » Каталог » Эффекты с изображениями » Набор 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;}
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

Теги материала

Хостинг от uCoz