Maski – informacje

Maska ukrywa pewną część elementu w zależności od tego, jaki ma kształt lub jakie są jej poziomy przezroczystości. Maskowany element może być obrazem, elementem div, kontenerem tekstu lub komponentem.

Każdy element może mieć tylko jedną maskę, ale maski możesz układać warstwowo, pakując maskowany element w element div i stosując maskę do elementu div kontenera. Możesz też zagnieździć kolejny element w maskowanym elemencie i dodać maskę do elementu podrzędnego.

Na tej stronie:

• Typy masek
• Wybieranie masek
• Edytowanie masek
• Animowanie masek
• Maski w układach elastycznych

Typy masek

• Maska w postaci obrazu
• Maska w postaci gradientu
• Maska w postaci przycięcia

Zgodność z przeglądarką

Microsoft Edge w wersji 40 i starszych obsługuje tylko prostokątne maski przycinania. Inne typy i kształty masek są ignorowane.

Maska w postaci obrazu

Maski w postaci obrazu ukrywają maskowany element za pomocą przezroczystych obszarów obrazu.

Maskowany element

Maska w postaci obrazu

Wynik

Aby dodać maskę w postaci obrazu:

1. Kliknij prawym przyciskiem myszy element, do którego chcesz zastosować maskę.
2. Wybierz z menu Dodaj maskę obrazu...
3. Zaimportuj lub wybierz obraz, którego chcesz użyć jako maski.

Rozmiar i pozycję maski możesz dostosować za pomocą Narzędzia do zaznaczania lub panelu Właściwości.

Uwaga: masek w postaci obrazu nie można pozycjonować za pomocą wartości procentowych.

Maska w postaci gradientu

Maski w postaci gradientu ukrywają maskowany element zgodnie z gradientem poziomów przezroczystości.

Maskowany element

Maska w postaci gradientu

Wynik

Google Web Designer obsługuje w maskach oba typy gradientu:

• gradient liniowy,
• gradient promieniowy.

Aby dodać maskę w postaci gradientu:

1. Kliknij prawym przyciskiem myszy element, do którego chcesz zastosować maskę.
2. Wybierz z menu Dodaj maskę gradientu.
3. Kliknij próbkę gradientu w panelu Właściwości, by dostosować typ gradientu, kolory, nieprzezroczystość i kąt (tylko w przypadku gradientów liniowych).

Domyślnie maska w postaci gradientu ma ten sam rozmiar co maskowany element, ale możesz dostosować właściwości jej położenia i rozmiaru za pomocą Narzędzia do zaznaczania lub panelu Właściwości.

Uwaga: masek w postaci gradientu nie można pozycjonować za pomocą wartości procentowych.

Maski w postaci przycięcia

Maski w postaci przycięcia mają kształt geometryczny. Określa on, która część maskowanego elementu będzie widoczna.

Maskowany element

Maska w postaci przycięcia

Wynik

Aby wybrać typ kształtu maski, kliknij i przytrzymaj narzędzie maski w postaci przycięcia na pasku narzędzi, aż pojawi się menu:

Maska prostokątna (domyślnie)
Maska owalna
Maska wielokątna

Zgodność z przeglądarką

• Internet Explorer i Microsoft Edge obsługują tylko prostokątne maski przycinania, których pozycja i rozmiar wyrażone są w pikselach. Maski określone procentowo i inne kształty masek, w tym zaokrąglone narożniki masek prostokątnych, będą ignorowane.

• Firefox i Safari mogą nieprawidłowo renderować maski prostokątne z zaokrąglonymi narożnikami, jeśli promień narożników jest duży w porównaniu z wymiarami maski.

• Safari nie obsługuje masek w postaci przycięcia w kształtach narysowanych przy użyciu narzędzia Prostokąt. Aby obejść ten problem, użyj elementu div zamiast kształtu prostokąta i umieść maskę na elemencie div.

• W przypadku Chrome i Opery maski w postaci przycięcia są renderowane niepoprawnie, jeśli maskowany element zawiera element podrzędny z przekształceniem 3D.

• Maski prostokątne z zaokrąglonymi narożnikami, których promień jest określony procentowo, w różnych przeglądarkach mogą być renderowane na różne sposoby (różnice będą niewielkie).

Aby dodać maskę w postaci przycięcia:

1. Wybierz element, do którego chcesz zastosować maskę.
2. Wybierz narzędzie Maska odpowiadające żądanemu kształtowi.
3. Ustaw dodatkowe opcje kształtu maski.
   • Tylko maski prostokątne: w przypadku zaokrąglonych narożników ustaw promień narożników na pasku opcji narzędzia u góry. Użyj przycisku Zachowaj identyczny , by dla wszystkich 4 narożników użyć tego samego promienia.
   • Tylko maski wielokątne: wybierz odpowiedni kształt z paska opcji narzędzia u góry. Aby narysować własny kształt, użyj opcji Dowolny. Jeśli wybierzesz opcję Wielokąt foremny, wpisz odpowiednią liczbę jego boków.
4. Narysuj maskę na elemencie, nad którym pracujesz.
   • Podczas rysowania przytrzymaj wciśnięty klawisz Shift, by maska miała taką samą szerokość i wysokość. Klawisz Shift nie ma wpływu na maski o dowolnych kształtach ani na pewne gotowe kształty, które są zawsze rysowane z bokami o równej długości: trójkąt, romb, pięciokąt, sześciokąt i gwiazdkę.
   • Przytrzymaj klawisz Alt, by użyć początkowej pozycji rysowania jako punktu środkowego maski.

Uwaga: po narysowaniu maski wielokątnej możesz zmienić jej kształt, przeciągając poszczególne wierzchołki, ale nie możesz zmienić liczby jej boków.

Kształty maski wielokątnej

	Dowolny (narysuj własny kształt)
	Wielokąt foremny (ustaw liczbę boków; będą one rysowane z jednakową długością)
	Trójkąt
	Prostokąt
	Ramka
	Romb
	Pięciokąt
	Sześciokąt
	Szewron w prawo
	Szewron w lewo
	Krzyż
	Gwiazda
	Strzałka w prawo
	Strzałka w lewo

Wybieranie masek

• Na scenie: wybierz maskowany element, a potem kliknij maskę. Maska zostanie otoczona zieloną linią.

• Na osi czasu trybu zaawansowanego: wybierz warstwę maski pod warstwą maskowanego elementu. Warstwy masek są oznaczone symbolem przed nazwą warstwy.

Warstwy masek na osi czasu trybu zaawansowanego możesz ukrywać i blokować, by można było łatwiej pracować z maskowanymi elementami.

Wybieranie wielu masek

Aby wybrać wiele warstw masek na osi czasu trybu zaawansowanego i usunąć wszystkie za jednym razem, naciśnij Ctrl i kliknij. W danej chwili można edytować tylko jedną maskę.

Kombinację elementów i masek możesz usunąć tylko wtedy, gdy w zaznaczeniu są uwzględnione maskowane elementy, do których stosowane są poszczególne maski.

Edytowanie masek

Maski możesz edytować bezpośrednio na scenie i za pomocą panelu Właściwości. Właściwości CSS masek są niedostępne w panelu CSS.

Edycja masek:

• Wycinanie, kopiowanie i wklejanie maski
• Przenoszenie maski
• Zmienianie rozmiaru maski
• Obracanie maski
• Zmienianie źródła maski w postaci obrazu
• Zmienianie gradientu w masce w postaci gradientu
• Zmienianie krzywizny narożników maski prostokątnej
• Zmienianie kształtu maski wielokątnej

Wycinanie, kopiowanie i wklejanie maski

Maskę możesz wyciąć lub skopiować, by wkleić ją do innego elementu, nawet w innym dokumencie. Możesz użyć tych metod:

• Na scenie lub na osi czasu trybu zaawansowanego:
  • Kliknij maskę prawym przyciskiem myszy i wybierz Wytnij lub Kopiuj.
  • Kliknij prawym przyciskiem myszy element, który chcesz zamaskować, i wybierz Wklej lub Zastąp maskę.
• Na osi czasu trybu zaawansowanego:
  • Przeciągnij warstwę maski do warstwy elementu, by przełączyć maskę na inny maskowany element (niedostępne podczas zastępowania maski).
  • Przytrzymaj klawisz Alt podczas przeciągania warstwy maski, by skopiować maskę do innego elementu (niedostępne podczas zastępowania maski).
• Skróty klawiszowe:
  • Wytnij – Ctrl+X (Windows) lub ⌘+X (Mac)
  • Kopiuj – Ctrl+C (Windows) lub ⌘+C (Mac)
  • Wklej – Ctrl+V (Windows) lub ⌘+V (Mac)
• Polecenia menu:
  • Edytuj > Wytnij
  • Edytuj > Kopiuj
  • Edytuj > Wklej lub Zastąp maskę

Wszystkie animacje maski również zostaną wklejone.

Ograniczenia dotyczące kopiowania i wklejania masek

• Możesz wybrać tylko jedną maskę do wycięcia lub skopiowania oraz jeden element, do którego zostanie wklejona.
• Wklejenie maski do elementu, który ma już maskę, zastąpi istniejącą maskę.
• Masek nie można wycinać, kopiować ani wklejać w regułach multimediów.

Przenoszenie maski

Wybierz maskę, którą chcesz przenieść, i użyj jednej z tych metod:

• Edytuj właściwości pozycji Góra i Lewo w panelu Właściwości. Wartości te mierzone są od lewego górnego rogu maskowanego elementu.
• Naciskaj klawisze strzałek, by przesuwać maskę o jeden piksel. Przytrzymaj naciśnięty klawisz Shift , by przesunąć maskę o 10 pikseli.
• Użyj Narzędzia do zaznaczania , by przeciągnąć maskę za pomocą myszy. Aby przesunąć maskę tylko wzdłuż jednej osi, podczas przeciągania przytrzymaj wciśnięty klawisz Shift.

Maski można umieszczać poza granicami elementów, do których są stosowane.

Uwaga: masek w postaci obrazu ani w postaci gradientu nie można pozycjonować za pomocą wartości procentowych.

Zmienianie rozmiaru maski

Wybierz maskę, której rozmiar chcesz zmienić, a potem:

• Edytuj szerokość i wysokość w panelu Właściwości.
• Użyj Narzędzia do zaznaczania z włączoną opcją Sterowanie przekształceniem na pasku opcji narzędzia u góry.
  • Aby zachować współczynnik proporcji, podczas przeciągania przytrzymaj wciśnięty klawisz Shift.
  • Podczas przeciągania przytrzymaj klawisz Alt (Windows) lub Opcja (Mac), by zmienić rozmiar maski bez zmiany jej punktu środkowego.

Obracanie maski

Masek nie można obracać bezpośrednio, ale możesz osiągnąć ten sam efekt, wykonując przed dodaniem maski te czynności:

1. Spakuj element, do którego chcesz zastosować maskę.
2. Dodaj maskę do elementu div kontenera.
3. Obróć element div kontenera. Maska też się obróci.
4. Obróć oryginalny element w przeciwnym kierunku.

Zmienianie źródła maski w postaci obrazu

Aby zamienić obraz używany w masce w postaci obrazu, wykonaj te czynności:

1. Wybierz maskę.
2. W panelu Właściwości kliknij przycisk Ustaw maskę obrazu w polu Źródło.
3. Wybierz obraz z Biblioteki lub kliknij przycisk Importuj zasoby , by użyć innego obrazu.
4. Kliknij OK.

Zmienianie gradientu w masce w postaci gradientu

Możesz dostosować gradient używany w masce w postaci gradientu.

1. Wybierz maskę.
2. W panelu Właściwości kliknij próbkę gradientu.
3. Edytuj gradient:
   • Typ gradientu: wybierz Gradient liniowy lub Gradient promieniowy .
   • Odległość przejścia: przeciągnij znacznik przezroczystości wzdłuż górnej krawędzi paska gradientu, by zmienić odległość przejścia.
   • Przezroczystość: znaczniki przezroczystości ustawiają poziom nieprzezroczystości na określony punkt gradientu. 100% wskazuje, że maskowany element będzie w pełni widoczny, a 0% oznacza, że element ten będzie całkowicie ukryty. Kliknij znacznik przezroczystości, by zmienić jego poziom nieprzezroczystości w polu wartości procentowej po prawej stronie.
   • Dodatkowe znaczniki przezroczystości: aby dodać więcej znaczników przezroczystości, kliknij pasek gradientu. Aby usunąć znacznik przezroczystości, przeciągnij go w dół.
   • Kąt: w przypadku gradientu liniowego możesz dostosować kąt.
   • Ustawienia domyślne: kliknij Gradient domyślny , by zresetować gradient do ustawień domyślnych (gradient liniowy od 0% do 100% przy 90 stopniach).

Zmienianie krzywizny narożników maski prostokątnej

Narożniki maski prostokątnej możesz zmienić na prostokątne lub zaokrąglone. W tym drugim przypadku możesz dostosować ich promień krzywizny.

1. Wybierz maskę.
2. W panelu Właściwości dostosuj promień narożnika w pikselach lub jako wartość procentową. Ustawienie promienia na 0 powoduje, że narożnik jest prostokątny.
3. Gdy przycisk Zachowaj identyczny jest aktywny, ta sama wartość ma zastosowanie do wszystkich 4 narożników. Dezaktywuj przycisk , by skonfigurować każdy narożnik osobno.

Zmienianie kształtu maski wielokątnej

Kształt maski wielokątnej możesz dostosować na scenie:

1. Wybierz maskę.
2. Wybierz narzędzie Maska wielokątna na pasku narzędzi. Na wierzchołkach pojawią się uchwyty.
3. Przeciągnij każdy wierzchołek w wybrane miejsce.
   • Podczas przeciągania przytrzymaj wciśnięty klawisz Shift, by przesunąć wierzchołek wzdłuż tylko jednej osi (pionowej lub poziomej).

Uwaga: po utworzeniu wielokątnej nie można zmienić liczby jej boków.

Animowanie masek

Możesz animować rozmiar i pozycję maski. Możesz też użyć zakresów widoczności, aby kontrolować, kiedy maska pojawia się lub znika. Animacja maski jest niezależna od animacji maskowanego elementu.

Animowana maska owalna

W przypadku masek prostokątnych można animować zaokrąglone narożniki. W przypadku masek w postaci przycięcia wielokątnego można również animować kształt maski (ale nie liczbę boków) przez zmianę położenia wierzchołków w klatce kluczowej.

Masek nie można edytować w wielu klatkach. Aby edytować animację maski, wybierz jedną klatkę kluczową.

Uwaga: podczas animowania masek w postaci obrazów z mniejszą szybkością zauważalny może być efekt zniekształcenia, ponieważ ułamkowe wartości pikseli między klatkami kluczowymi są zaokrąglane.

Zgodność z przeglądarką

Animacja maski w postaci przycięcia nie jest odtwarzana w Safari, jeśli dokument zawiera elementy <canvas>, na przykład komponent Galeria przejść, Efekt graficzny lub Efekty cząstek.

Maski w układach elastycznych

Reguły multimediów pozwalają zastąpić właściwości i animacje maski w określonych zakresach rozmiarów widocznego obszaru. W przypadku masek w postaci obrazu możesz też zastąpić źródło, by użyć innego obrazu. W przypadku masek w postaci gradientu możesz zmienić gradient.

Uwaga: jeśli usuniesz zastąpienie właściwości pozycji lub rozmiaru, obie właściwości pozycji (Góra i Lewo) lub obie właściwości rozmiaru (Szerokość i Wysokość) zostaną automatycznie zresetowane. W przypadku masek w postaci przycięcia zostaną zresetowane wszystkie właściwości pozycji i rozmiaru.