CSS mask — маска зображенням чи градієнтом

CSS властивість mask маскує елемент зображенням або градієнтом: видимим лишається те, що під непрозорими ділянками маски.

правити

Загальний опис

Різниця з clip-path принципова: той ріже за контуром — усередині все видно, зовні нічого. Маска ж працює прозорістю: напівпрозора ділянка маски дає напівпрозорий елемент, тож можливі плавні переходи.

Найуживаніший прийом — градієнтне згасання: маска linear-gradient(black 60%, transparent) розчиняє низ фотографії чи текст, що «йде в туман». Чорне (будь-який непрозорий колір) — видиме, прозоре — сховане.

Другий прийом — фігурні вирізи зображенням: маска-png або svg із будь-яким малюнком перетворює прямокутну фотографію на фігуру.

Маска не змінює геометрію: елемент займає те саме місце, кліки в схованих ділянках він так само ловить.

правити

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

Переглядачі

Переглядачів ще не додано.

Приклади

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

<img class="fade" src="/img/logo.svg" alt="">

.fade {
    width: 300px;
    /* чорне — видно, прозоре — сховано */
    mask: linear-gradient(black 60%, transparent);
}