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


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

Нотатка:

Щоб використовувати кілька фільтрів, кожен фільтр потрібно розділити з пропуском.

Нотатка:

Chrome, Opera і Safari підтримують властивість -webkit-filter.

Синтаксис

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

Властивість filter може отримувати 14 значень:

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.

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.WebkitFilter="grayscale(100%)"

Переглядачі

Переглядач
filter

18.0

13.0

3.5.0

9.1

15.0


Мобільних переглядачів ще не додано.


Мобільних переглядачів ще не додано.

Приклади


Зміна кольору всіх зображень в чорно-білий (100% сірого)

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);



}

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