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


CSS властивість falter визначає, які візуальні ефекти застосувати до елемента, наприклад, розмиття чи контраст. Найчастіше застосовується до елемента <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);
}

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

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів