|
 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);} 
На этом все. Как и обещал, демо
|
По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей
Chat
Instruction
Rating
Video
News
Newbb
TDMDownloads
extGallery
Денвер
XAMPP
Rh Editor
Кнопки
Кнопки
XOOPS
HTML,CSS,JS
PHP
Web-сервер
Добро пожаловать на сайт поддержки XOOPS.
CSS filter
