CSS фільтри в дії

4 хв. читання
24 листопада 2021

CSS filter надає змогу модифікації рендеру елементів в браузері. Ви можете використовувати його, щоб застосувати візуальні ефекти, такі як розмиття або зміна кольорів. Є багато способів його використання: від надання фільтрів типу Instagram/Photoshop до зміни теми сайту.

    /* Синтаксис */
    .apply-filters {
        [vendor-prefix]filter: <filter-function> [<filter-function>]* | none
    }
    
    /* GRAYSCALE для всіх зображень */
    img {
        -webkit-filter: grayscale(100%);/* Webkit vendor */
        filter: grayscale(100%);
    }
    
    /* VINTAGE ефект для всієї сторінки */
    body {
        -webkit-filter: grayscale(0.1) saturate(1) sepia(0.6);/* Webkit vendor */
        filter: grayscale(0.1) saturate(1) sepia(0.6);
    }

** приклади і невеликі описи:**

  • Застосовується Гаусове розмивання:
    filter: blur(2px);
  • Робить з'явлення більш або менш яскравим:
    filter: brightness(7);
  • Регулювання контрастності:
    filter: contrast(3);
  • Перетворює кольори в відтінки сірого:
    filter: grayscale(0.6);
  • Додає ефект тіні:
    filter: drop-shadow(20px 20px 10px black);
  • Застосовується тон-обертання:
    filter: hue-rotate(108deg);
  • Інвертування кольорів:
    filter: invert(0.5);
  • Застосовується прозорість:
    filter: opacity(0.4);
  • Насиченість елементів:
    filter: saturate(3);
  • Конвертування до сепії:
    filter: sepia(0.2);
  • Для нанесення фільтрів SVG:
    filter: url(filter.svg#anchor-to-specific-element);

Приклади використання

Тематизація сайтів

Деякий час тому я розробляв проект з темною загальною темою. Одного разу ми вирішили реалізувати світлу тему. Зазвичай після такого рішення дизайнери або веб-розробники починають надавати альтернативні кольори для кожного елемента. Це дуже довгий і нудний процес. Коли я почав працювати над цим у мене з'явилась ідея використати CSS фільтри для цього і це було дивовижно, тому що за допомогою тільки одного рядка CSS я додав світлу тему для всього сайту! З цього вийшло, що можна забезпечити безліч тем, використовуючи тільки CSS фільтри...

Як приклад, давайте створимо темну тему за допомогою CSS фільтрів для GitHub у браузері:

  1. Відкрийте Github
  2. Застосуйте наступний css до html елементу:
    html{
        -webkit-filter: brightness(0.9) hue-rotate(180deg) invert(1);
        filter: brightness(0.9) hue-rotate(180deg) invert(1);
    }
  1. Насолоджуйтесь результатом:CSS фільтри в дії

Онлайн/оффлайн статус

Інший приклад використання CSS фільтрів - відображення статусу користувача. Показати кольоровий аватар, коли користувач знаходиться в мережі і відтінки сірого коли він оффлайн.

  1. Коли користувач оффлайн просто застосовуємо фільтр відтінків сірого до зображення
    .offline .avatar{
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
  1. Codepen демо:

Instagram фільтри

Також CSS фільтри хороші в створенні ефектів. Таких, як instagram фільтри.

  • Вінтаж: CSS фільтри в дії
    -webkit-filter: grayscale(0.1) saturate(1) sepia(0.6);
  • Кислотний:

    CSS фільтри в дії
    -webkit-filter: hue-rotate(72deg) saturate(3) sepia(0.2);
  • Відтінки сірого: CSS фільтри в дії
    -webkit-filter: grayscale(1);
  • Перевернуті кольори: CSS фільтри в дії
    -webkit-filter: brightness(0.9) hue-rotate(180deg) invert(1);

Ефекти розмивання

Коли модальне вікно відкрите, фон може бути розмитим \- це дає змогу користувачам розуміти, де вони були до відкриття. І, звичайно, це виглядає просто класно :)

  1. Вмісту сторінки і модальне вікно повинно бути на тому ж рівні в HTML:
    <div class="page-container"></div>
    <div class="modal"></div>
  1. При відкритті модального вікна просто додайте наступні стилі до контейнеру сторінки:
    .page-container{
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }

Підтримка filter браузерами

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (2)
Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація