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

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

правити

Нотатка

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

автор: NagarD правити

Нотатка

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

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

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

none

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

автор: NagarD

правити

blur(px)

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

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

автор: NagarD

правити

brightness(%)

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

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

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

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

автор: NagarD

правити

contrast(%)

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

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

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

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

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

автор: NagarD

правити

grayscale(%)

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

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

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

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

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

автор: NagarD

правити

hue-rotate(deg)

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

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

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

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

автор: NagarD

правити

invert(%)

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

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

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

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

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

автор: NagarD

правити

opacity(%)

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

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

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

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

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

автор: NagarD

правити

saturate(%)

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

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

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

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

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

автор: NagarD

правити

sepia(%)

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

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

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

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

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

автор: NagarD

правити

url()

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

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

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

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.

автор: NagarD

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
filter	18.0	3.5.0	9.1	15.0	13.0

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

Приклади

+ запропонувати свій приклад у пісочниці

<img src="/img/logo.svg" alt="кольорове">
<img class="gray" src="/img/logo.svg" alt="чорно-біле">

img {
    width: 140px;
}

.gray {
    filter: grayscale(100%);
}

<figure><img src="/img/logo.svg" alt=""><figcaption>оригінал</figcaption></figure>
<figure><img class="blur" src="/img/logo.svg" alt=""><figcaption>blur(4px)</figcaption></figure>
<figure><img class="brightness" src="/img/logo.svg" alt=""><figcaption>brightness(0.3)</figcaption></figure>
<figure><img class="contrast" src="/img/logo.svg" alt=""><figcaption>contrast(180%)</figcaption></figure>
<figure><img class="grayscale" src="/img/logo.svg" alt=""><figcaption>grayscale(100%)</figcaption></figure>
<figure><img class="huerotate" src="/img/logo.svg" alt=""><figcaption>hue-rotate(180deg)</figcaption></figure>
<figure><img class="invert" src="/img/logo.svg" alt=""><figcaption>invert(100%)</figcaption></figure>
<figure><img class="opacity" src="/img/logo.svg" alt=""><figcaption>opacity(50%)</figcaption></figure>
<figure><img class="saturate" src="/img/logo.svg" alt=""><figcaption>saturate(7)</figcaption></figure>
<figure><img class="sepia" src="/img/logo.svg" alt=""><figcaption>sepia(100%)</figcaption></figure>
<figure><img class="shadow" src="/img/logo.svg" alt=""><figcaption>drop-shadow</figcaption></figure>

figure {
    display: inline-block;
    margin: 6px;
    text-align: center;
    font-size: 12px;
}

img { width: 90px; }

.blur       { filter: blur(4px); }
.brightness { filter: brightness(0.30); }
.contrast   { filter: contrast(180%); }
.grayscale  { filter: grayscale(100%); }
.huerotate  { filter: hue-rotate(180deg); }
.invert     { filter: invert(100%); }
.opacity    { filter: opacity(50%); }
.saturate   { filter: saturate(7); }
.sepia      { filter: sepia(100%); }
.shadow     { filter: drop-shadow(8px 8px 10px green); }