CSS mask-image property - jak tworzyć dowolne kształty z obrazu

mask-image to właściwość CSS maskująca element obrazem albo gradientem: piksele nieprzezroczyste maski pokazują treść, przezroczyste ją ukrywają. Zastosowania: wycinanie obrazów w dowolne kształty, efekty zanikania, animowane odsłonięcia i dekoracje. Wartością może być plik SVG, PNG z kanałem alfa albo gradient. Od clip-path różni się naturą maski: clip-path tnie kształtami geometrycznymi, mask-image maskuje zawartością obrazu — co pozwala na kształty organiczne i półprzezroczystości. Wsparcie współczesnych przeglądarek jest pełne.

Podstawy składni:

• mask-image: url(maska.svg) — maska z pliku, najpotężniejszy wariant,
• mask-image: linear-gradient(to bottom, black, transparent) — efekt zanikania,
• mask-image: radial-gradient(...) — okrągłe odsłonięcie,
• właściwości towarzyszące: mask-mode (alfa kontra luminancja), mask-position, mask-size, mask-repeat.

Historyczna uwaga: przez lata potrzebny był przedrostek -webkit-mask-image i wielu deweloperów wciąż dodaje go defensywnie, choć współczesne wydania wszystkich głównych przeglądarek obsługują zapis bez przedrostka.

Repertuar zastosowań:

• obrazy w dowolnych kształtach — awatary w gwiazdce czy sercu,
• płynne zanikanie treści gradientem,
• efekty reflektora odsłaniające fragment radialnie,
• animowane odsłonięcia przez ruch pozycji lub rozmiaru maski,
• efekty tekstowe w parze z background-clip,
• dekoracje: fale, nieregularne krawędzie sekcji,
• wycięcia logotypów,
• maski SVG dla naprawdę złożonych kształtów.

To ulubione narzędzie stron kreatywnych i portfolio, gdzie nieregularny kształt buduje charakter projektu.

Wybór między narzędziami: clip-path definiuje widoczny obszar matematycznie — koła, wielokąty, ścieżki — i wygrywa przy prostych kształtach oraz animacjach, bo jest lepiej akcelerowany. mask-image maskuje zawartością obrazu — wygrywa przy kształtach organicznych, gradientowych przejściach i półprzezroczystościach, których clip-path nie umie. Można je łączyć: maska dla wzoru, przycięcie dla ogólnego konturu. Reguła kciuka: geometria — clip-path, wszystko miękkie i fotograficzne — mask-image.

Na co uważać:

• różnice między przeglądarkami — Safari historycznie renderował maski nieco inaczej, testy obowiązkowe,
• wydajność — animowanie masek z dużymi obrazami bywa kosztowne; lepiej proste maski SVG,
• format obrazu maski musi mieć kanał alfa — PNG albo SVG, JPEG odpada,
• tryb maski (alfa kontra luminancja) zmienia wynik — warto ustawiać jawnie,
• rozmiar maski bez jawnego mask-size zachowuje się nieprzewidywalnie,
• defensywny przedrostek -webkit- wciąż bywa dodawany dla starszych przeglądarek.