CSS : filter в современных браузерах
Написал MACTEP в 10.04.2015 19:40:00 ( 1613 прочтений )

Фильтры для изображенийCSS3 порадовала нас применением всяких фильтров к изображению (и не только). Данная статья поможет вам разобраться с таким свойством как filter.



Возможности:

Преобразование в серые цвета (grayscale);

Сепия (sepia);

Насыщенность (saturate);

Сдвиг цвета (hue-rotate);

Инверсия цвета (invert);

Прозрачность (opacity);

Яркость (brightness);

Контраст (contrast);

Размытие (blur);

Тени (drop-shadow)

 

Начнем с серых цветов:

Преобразование изображения в оттенки серого . Значение 100% - изображение будет в  оттенках серого . Значение 0 % - без изменений. Значения между 0 % и 100 % являются промежуточными.
Отрицательные значения не допускаются .

img{filter: grayscale(100%);}

 

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

Преобразование в серые цвета

 

 

Сепия

Преобразует изображение в сепию .  Значение 100%  - полная сепия . Значение 0 % - без изменений. Значения между 0 % и 100 % являются промежуточными значениями.
Отрицательные значения не допускаются .

img {filter: sepia(100%);}

 

Сепия

 

 

Насыщенность

Насыщенность изображения .  Значение 0 % черно-белое. Значение 100% - без изменений. Другие значения являются промежуточными значениями. Значения свыше 100 % допускается , обеспечивая лучшее насыщение изображения.
Отрицательные значения не допускаются .

img {filter: saturate(0%);}

 

Насыщенность

 

 

img {filter: saturate(200%);}

 

Насыщенность

 

 

Сдвиг цвета

Применяется сдвиг цвета изображения . Значение 0deg - без изменений.  360deg - сдвиг на 360 градусов. 0deg - 360deg - промежуточные значения.  Что бы разобраться со сдвигом, рекомендую посмотреть палитру цветов в Paint.net

Палитра цветов

 

img {filter: hue-rotate(180deg);}

 

Насыщенность

 

Инверсия

Инвертирование цвета.  Значение 100%  - полное инвертирование . Значение 0 % - без изменений. Значения между 0 % и 100 % являются промежуточными значениями, при чем, значене 50% превращает изображение в серый цвет.
Отрицательные значения не допускаются .

img {filter: invert(100%);}

 

Инверсия цвета изображения

 

 

Прозрачность

Прозрачность изображения . Значение 0 % соответствует полной прозрачности . Значение 100% - без изменений. Значения между 0 % и 100 % являются промежуточными.
Отрицательные значения не допускаются .


img {filter: opacity(50%);}

 

прозрачность изображения

 

 

Яркость

Яркость изображения. Значение 0 % создаст  полностью черное изображение. Значение 100% - без изменений.  Значения свыше 100 % допускаеюся , при этом изображение будет ярче.
Отрицательные значения не допускаются .


img {filter: brightness(50%);}

 

яркость изображения

 

img {filter: brightness(150%);}

 

яркость изображения

 

Контраст

Регулировка контрастности изображения. Значение 0 % создаст изображение полностью серым . Значение 100% - без  изменений. Значения более 100 % разрешаются , обеспечивая большую контрастность .
Отрицательные значения не допускаются .


img {filter: contrast(50%);}

 

контрастность изображения

 

 

img {filter: contrast(150%);}

 

контрастность изображения

 

Размытие

Применяет гауссово размытие исходного изображения . Передаваемый параметр ( радиус ) определяет значение стандартного отклонения в гауссовой функции . Параметр задается применяемыми размерами в CSS (px, pt, em) , но не принимает процентных значений .
Отрицательные значения не допускаются .

img {filter: blur(3px);}

 

размытие изображения

 

 

Тени

Применяет эффект тени для исходного изображения . Применимо так же, как и в box-shadow. Тень образуется не вокруг всего прямоугольника изображения, а вокруг всех непрозрачных объектов.

Обратите внимание, что нельзя прописывать несколько теней, как мы прописываем в box-shadow.


img {filter: drop-shadow(4px 4px 6px #000);}

 

Применение тени к изображению

 

 

 

На этом все.

 

Как и обещал, демо

 

 


Теги: CSS filter  
Предыдущая новость Следующая новость
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

3 пользователь(ей) активно (1 пользователь(ей) просматривают Web)

Участников: 0
Гостей: 3

далее...

Рекомендуем