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

правити

Переглядачі

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

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

Переглядач
	53	35	9.1	40	12	—

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

Переглядач
	53	53	35	9.3

Приклади

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

<img src="/img/logo.svg" alt="чітке">
<img class="blurred" src="/img/logo.svg" alt="розмите">

img {
    width: 140px;
}

.blurred {
    filter: blur(5px);
}

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

<div class="box"> 
  <p>Демонтрація роботи значення filter</p>
  
<label for="select">Задати значення для filter: </label>
<select class="input" id="select">
  <option value="original" name="filter" selected>original</option>
  <option value="blur" name="filter">blur</option>
  <option value="brightness" name="filter">brightness</option>
  <option value="contrast" name="filter">contrast</option>
  <option value="grayscale" name="filter">grayscale</option>
  <option value="huerotate" name="filter">huerotate</option>
  <option value="invert" name="filter">invert</option>
  <option value="opacity" name="filter">opacity</option>
  <option value="saturate" name="filter">saturate</option>
  <option value="sepia" name="filter">sepia</option>
  <option value="shadow" name="filter">shadow</option>
</select> 
</div>

body{
  font-size: 17px;
  text-align: center;
}
p{
  font-weight: 700;
}
.wrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.block{
  width: 200px;
  height: 200px;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.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(70%);
    filter: invert(70%);
}
.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);
}

document.querySelectorAll('#select').forEach((el) => el.addEventListener('change', function () {
  var filter = this.value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('filter', filter));
}));

<div class="box"> 
  <p>Демонтрація роботи значення filter</p>
  
<label for="select">Задати значення для filter: </label>
<select class="input" id="select">
  <option value="original" name="filter" selected>original</option>
  <option value="blur" name="filter">blur</option>
  <option value="brightness" name="filter">brightness</option>
  <option value="contrast" name="filter">contrast</option>
  <option value="grayscale" name="filter">grayscale</option>
  <option value="huerotate" name="filter">huerotate</option>
  <option value="invert" name="filter">invert</option>
  <option value="opacity" name="filter">opacity</option>
  <option value="saturate" name="filter">saturate</option>
  <option value="sepia" name="filter">sepia</option>
  <option value="shadow" name="filter">shadow</option>
</select> 
</div>
<div class="block"></div>

body{
  font-size: 17px;
  text-align: center;
}
p{
  font-weight: 700;
}
.block{
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
}
.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(70%);
    filter: invert(70%);
}
.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);
}

const block = document.querySelector('.block');
let filter = '';

document.querySelector('#select').addEventListener('change', function () {
  // classList.remove('') кидає помилку, тому порожній фільтр відсіюємо
  if (filter) {
    block.classList.remove(filter);
  }
  filter = this.value;
  if (filter) {
    block.classList.add(filter);
  }
});