css властивість filter

CSS властивість filter визначає, які візуальні ефекти застосувати до елемента, наприклад, розмиття чи контраст. Найчастіше застосовується до елемента <img>).

Синтаксис

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

none

Ефекти відсутні. Без задання.

blur(px)

Задає розмиття. Чим більше значення, тим більше розмиття.

Якщо значення не вказано, використовується 0. Від'ємне значення заборонено.

brightness(%)

Яскравість зображення:

• 0% зробить зображення повністю чорним.

• 100% (1) Зображення залишиться без змін. Без задання.

• Значення більше за 100% зробить зображення більш світлим.

contrast(%)

Контрастность зображення:

• Значення меньше 100% чи 1 зменьшить контрастність.

• 100% чи 1 Зображення залишиться без змін. Без задання.

• Значення більше 100% чи 1збільшить контрастність.

Від'ємне значення не допускається. Пусте значення сприймається як 1.

grayscale(%)

Перетворить зображення у чорно-біле.

• 100% чи 1 - Перетворює зображення в чорно-біле.

• 0% чи 0- Зображення не змінюється.

• Від 0% до 100% (або від 0 до 1) змінюють кольорову гамму картинки.

Від'ємні значення заборонені. Порожнє значення сприймається як 0.

hue-rotate(deg)

Змінює кольоровість зображення за рахунок повороту відтінку на колірному колі.

• 0 або 360 градусів залишає зображення незмінним.

• Будь-які інші значення будуть змінювати колірну гамму.

Від'ємні значенні дозволені. Максимальне значення 360deg. Порожнє значення сприймається як 0deg.

invert(%)

Інвертує кольору в зображенні. За своєю дією схоже на перетворення фотографії в негатив.

• 0% або 0 - Зображення буде без змін.

• 100% або 1 - Повністю інвертує кольору картинки.

• Від 0% до 100% або від 0 до 1 - Частково інвертує кольори.

Від'ємні значення заборонені. Порожнє значення сприймається як 0.

opacity(%)

Задає ступінь прозорості зображень. За своєю дією схожа на властивість opacity, але деякі браузери для фільтрів застосовують апаратне прискорення щоб підвищити їх продуктивність.

• 100% або 1 Зображення залишиться без змін.

• 0% або 0 Зображення стане повністю прозорим.

• 0% до 100% або від 0 до 1 задає ступінь прозорості зображення.

Від'ємне значення не допускається. Порожнє значення сприймається як 1.

saturate(%)

Насиченість кольорів в зображенні.

• 0% або 0 прибирає насиченість кольорів в зображенні, перетворюючи його в чорно-біле.

• 100% або 1 залишає зображення незмінним.

• 100% та більше робить зображення більш насиченими.

Від'ємне значення не допускається. Порожнє значення сприймається як 1.

sepia(%)

Перетворює зображення в сепію - так зване чорно-біле зображення з коричневим відтінком. Сепія надає фотографіям старовинний вигляд:

• 0% або 0 Зображення не змінюється.

• 100% або 1 Сепія в максимальну силу.

• 0% до 100% або від 0 до 1 лінійно застосовують сепію.

Від'ємні значення не допускаються. Порожнє значення сприймається як 0.

url()

Приймає розташування XML файлу, який визначає SVG фільтр. Посилання, також може включати в себе якір для конкретного фільтра.

Приклад: filter: url(svg-url#element-id)

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

drop-shadow(h-shadow v-shadow blur spread color)

Застосовується ефект тіні до зображення.

Можливі значення:

• h-shadow - Обов'язково. Задає значення ширини горизонтальної тіні. Від'ємні значення відобразять тінь зліва від зображення.

• v-shadow- Обов'язково. Задає значення пікселя для вертикальної тіні. Від'ємні значення відобразять тінь над зображенням.

• blur - Необов'язково. Це третє значення і воно має бути в пікселях. Додає ефект розмиття тіні. Більше значення буде створювати більше розмиття (тінь стає більшою та світлішою). Від'ємні значення не допускаються. Якщо значення не вказано, використовується 0 (тіні не буде видно).

• spread - Необов'язково. Це четверте значення і воно має бути в пікселях. Додатнє значення змусить тінь розширюватися, а від'ємні значення змусять тінь скорочуватися. Якщо це значення не вказано, то воно буде 0 (тінь матиме той же розмір, що й елемент). Примітка: Chrome, Safari, Opera можливо й інші браузери, не підтримують це значення.

• колір - необов'язково. Додає колір тіні. Якщо не вказано, то колір залежить від браузера (найчастіше, тінь буде чорного кольору).

Приклад створення червоної тіні, ширина та висота якої 8px з ефектом розмивання в 10 пікселів:

filter: drop-shadow(8px 8px 10px red);

Підказка: Цей фільтр аналогічний властивості box-shadow.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2

img {



    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */



    filter: grayscale(100%);



}

.blur {



    -webkit-filter: blur(4px);



    filter: blur(4px);



}







.brightness {



    -webkit-filter: brightness(0.30);



    filter: brightness(0.30);



}







.contrast {



    -webkit-filter: contrast(180%);



    filter: contrast(180%);



}







.grayscale {



    -webkit-filter: grayscale(100%);



    filter: grayscale(100%);



}







.huerotate {



    -webkit-filter: hue-rotate(180deg);



    filter: hue-rotate(180deg);



}







.invert {



    -webkit-filter: invert(100%);



    filter: invert(100%);



}







.opacity {



    -webkit-filter: opacity(50%);



    filter: opacity(50%);



}







.saturate {



    -webkit-filter: saturate(7);



    filter: saturate(7);



}







.sepia {



    -webkit-filter: sepia(100%);



    filter: sepia(100%);



}







.shadow {



    -webkit-filter: drop-shadow(8px 8px 10px green);



    filter: drop-shadow(8px 8px 10px green);



}

Додаткові посилання