Maskowanie CSS pozwala użyć obrazu jako warstwy maski. Oznacza to, że jako maski możesz użyć obrazu, SVG lub gradientu, aby tworzyć interesujące efekty bez użycia edytora obrazów.
Gdy przycinasz element za pomocą właściwości clip-path, przycinany obszar staje się niewidoczny.
Jeśli zamiast tego chcesz uzyskać nieprzezroczystość obrazu lub zastosować do niego inny efekt, użyj maskowania.
W tym poście wyjaśniamy, jak używać właściwości mask-image w CSS, by określić obraz, który ma być używany jako warstwa maski.
Masz do wyboru 3 opcje. Jako maski, SVG lub gradientu możesz użyć pliku graficznego.
Zgodność z przeglądarką
Większość przeglądarek obsługuje tylko częściową obsługę standardowej właściwości maskowania CSS.
Aby zapewnić jak największą zgodność z przeglądarkami, oprócz właściwości standardowej musisz też używać prefiksu -webkit-.
Pełne informacje o obsłudze przeglądarek znajdziesz w artykule Czy mogę używać masek CSS?.
Obsługa przez przeglądarki z wykorzystaniem właściwości z prefiksem jest przydatna, ale jeśli używasz maskowania, aby nałożyć tekst na obraz, warto zadbać o to, co się stanie, jeśli maskowanie będzie niedostępne.
Warto użyć zapytań o funkcje, aby wykryć obsługę mask-image lub -webkit-mask-image i podać czytelną wartość zastępczą przed dodaniem wersji maskowanej.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Maskowanie za pomocą obrazu
Właściwość mask-image działa w podobny sposób do właściwości background-image.
Przekazywanie obrazu za pomocą wartości url()
Obraz maski musi zawierać przezroczysty lub półprzezroczysty obszar.
W pełni przezroczysta część obrazu pod tym obszarem będzie niewidoczna. Użycie półprzezroczystego obszaru spowoduje jednak, że część oryginalnego zdjęcia będzie przez niego prześwietlona. Różnica jest widoczna poniżej. Pierwszy obraz to oryginalne zdjęcie dymków bez maski. Drugi obraz ma zastosowaną maskę z białą gwiazdką na całkowicie przezroczystym tle. Trzeci obraz ma białą gwiazdkę na tle z przezroczystością gradientu.
W tym przykładzie używam też właściwości mask-size o wartości cover.
Ta właściwość działa tak samo jak background-size.
Możesz użyć słów kluczowych cover i contain lub określić rozmiar tła, używając dowolnej prawidłowej jednostki długości albo wartości procentowej.
Możesz też powtórzyć maskę tak samo jak obraz tła, aby wykorzystać mały obraz jako powtarzający się wzór.
Maskowanie w formacie SVG
Zamiast maski w postaci pliku graficznego, możesz użyć pliku SVG.
Można to osiągnąć na kilka sposobów.
Pierwszym z nich jest umieszczenie elementu <mask> w obrębie SVG i odwołanie się do identyfikatora tego elementu we właściwości mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Zaletą tego podejścia jest to, że maskę można zastosować do dowolnego elementu HTML, nie tylko do obrazu. Firefox to jedyna przeglądarka, która obsługuje to podejście.
Nie wszystko jednak stracone. W najczęstszym scenariuszu maskowania obrazu możemy go uwzględnić w SVG.
Maskowanie z gradientem
Użycie gradientu CSS jako maski to elegancki sposób na uzyskanie zamaskowanego obszaru bez konieczności zajmowania się tworzeniem obrazu czy SVG.
Prosty gradient liniowy użyty jako maska może sprawić, że dolna część obrazu nie będzie na przykład zbyt ciemna pod podpisem.
Możesz używać dowolnego z obsługiwanych typów gradientów i dostosować swoją kreatywność. W tym następnym przykładzie użyto gradientu promieniowego, aby utworzyć okrągłą maskę doświetlającą napis.
Używanie wielu masek
Podobnie jak w przypadku obrazów tła możesz określić wiele źródeł masek i połączyć je w celu uzyskania odpowiedniego efektu. Jest to szczególnie przydatne, jeśli jako maski chcesz użyć wzorca wygenerowanego z gradientami CSS. Zwykle wykorzystuje się w nich wiele obrazów tła, więc łatwo można je przekształcić w maskę.
Dla przykładu udało mi się znaleźć ładny wzór w szachownicę w tym artykule. Kod z wykorzystaniem obrazów tła wygląda tak:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Aby przekształcić ten lub dowolny inny wzorzec przeznaczony do obrazów tła w maskę, musisz zastąpić właściwości background-* odpowiednimi właściwościami mask, w tym tymi z prefiksem -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Zastosowanie wzorów gradientowych do obrazów może przynieść bardzo ładne efekty. Spróbuj zremiksować Zakłócenie i przetestuj kilka innych wersji.
Maski CSS to nie tylko metoda przycinania, ale też sposób na wzbudzenie zainteresowania do obrazów i innych elementów HTML bez konieczności używania aplikacji graficznej.
Fot. Julio Rionaldo, Unsplash.