Jak korzystać z technik przycinania i maskowania CSS i SVG

Pliki SVG świetnie nadają się do pracy w Internecie, a przycinanie i maskowanie pozwalają na interesujące sposoby pokazywania lub ukrywania fragmentów grafiki internetowej. Korzystanie z tych technik pozwala również na większą elastyczność projektów, ponieważ nie trzeba ręcznie wprowadzać zmian i tworzyć nowych obrazów — wszystko odbywa się za pomocą kodu. Stosując kombinację technik przycinania i maskowania CSS, będziesz mieć wiele opcji dla grafiki swojej witryny.

Aby pomóc wyjaśnić rzeczy, maskowanie i przycinanie to dwa różne sposoby manipulowania obrazami za pomocą CSS. Zacznijmy od przycinania.

Podstawy przycinania

Jeśli kiedykolwiek korzystałeś z programu Photoshop, prawdopodobnie znasz już maski przycinające. To podobne podejście. Przycinanie polega na ułożeniu kształtu wektorowego, takiego jak okrąg lub trójkąt, na obrazie lub elemencie. Dowolna część obrazu za kształtem będzie widoczna, podczas gdy wszystko poza granicami kształtu będzie ukryte.

Na przykład, jeśli maska ​​przycinająca trójkąta znajduje się nad obrazem lasu, obraz lasu będzie widoczny w kształcie trójkąta. Granica kształtu nazywana jest ścieżką przycinania, której nie należy mylić z wycofaną właściwością clip . Ścieżkę przycinania tworzy się za pomocą właściwości clip-path .

Uwaga: nie próbuj tego w swojej aktywnej witrynie

Pamiętaj: nigdy nie powinieneś zmieniać kodu bezpośrednio w swojej witrynie, aby upewnić się, że nic się nie zepsuje. Nasza bezpłatna lokalna aplikacja programistyczna Local pomoże Ci skonfigurować środowisko testowe, w którym możesz bezpiecznie śledzić ten samouczek.

Przycinanie w akcji

Klipy są zawsze ścieżkami wektorowymi. Zrozumienie tego może być mylące, ale wszystko poza ścieżką będzie ukryte, podczas gdy wszystko wewnątrz ścieżki będzie widoczne. Aby lepiej zrozumieć i przetestować to samodzielnie, zobacz przykład na CodePen.

Oto fragment struktury HTML z przykładu:

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Oto CSS, który umożliwia przycinanie:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

Możesz zobaczyć, gdzie w kodzie HTML odwołuje się identyfikator clipPath i jak używa on adresu URL clip-path do przycinania.

Narzędzie Clippy

Clippy to świetne narzędzie do generowania ścieżek klipów CSS. Istnieje wiele różnych kształtów i rozmiarów początkowych, które można dostosować.

Podstawy maskowania

Maskowanie odbywa się za pomocą obrazu PNG, gradientu CSS lub elementu SVG, aby ukryć część obrazu lub inny element na stronie. Skoncentrujemy się na grafice SVG, ale pamiętaj, że można to zrobić za pomocą innych typów lub stylów obrazów.

Właściwość maski i element maski

To tylko przypomnienie, aby pomóc w wizualizacji, należy pamiętać, że maskowany element jest „oryginalnym” (przed nałożeniem maski) obrazem. Możesz nie chcieć widzieć całego obrazu, więc ukrywanie jego części odbywa się za pomocą właściwości CSS mask . mask to skrót CSS określający grupę indywidualnych właściwości, do których omówimy za chwilę. Element SVG <mask> jest używany wewnątrz grafiki SVG w celu dodania efektów maskowania. W tym przykładzie maską jest okrąg i zastosowano również gradient.

Używanie elementu maski SVG na grafice SVG

Aby wczuć się w <mask> SVG, zamaskujemy ją grafiką SVG.

Na pierwszy rzut oka może to być nieco skomplikowane, ale wszystko to działa razem, aby zamaskować obraz znajdujący się pod spodem. Mamy rzeczywisty obraz jako tło, więc gdzie w grę wchodzi SVG? W przeciwieństwie do przykładów przycinania, ten obraz tła znajduje się technicznie wewnątrz elementu SVG. Użyjemy CSS, aby zastosować tę maskę do obrazu. Właściwości będą pochodzić z elementu maski SVG i nadajemy mu identyfikator masked-element w naszym CSS.

Aby zobaczyć to w akcji, sprawdź ten przykład Codepen. Oto działający kod dla zamaskowanej grafiki SVG:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

W tym CSS określamy, gdzie znaleźć maskę. Będzie szukał identyfikatora #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

Zauważasz gradient w kształcie koła? Zastosowano gradient, a także ustalono kształt koła dla maski.

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

Maskowanie tekstu SVG

Maskowanie tekstu może zrobić kilka fajnych rzeczy, takich jak wyświetlanie obrazu przez blok tekstu. Dobrą wiadomością jest to, że element tekstowy może być użyty wewnątrz maski SVG. Wraz ze wzrostem obsługi przeglądarek w przyszłości może to być naprawdę interesujący sposób łączenia obrazów i typografii.

Oto podstawowe wyjaśnienie tego, co się dzieje. Wewnątrz maski SVG znajduje się element tekstowy SVG. Określiliśmy wartość RGB dla bieli, która tworzy owalny obszar wokół zamaskowanego tekstu. Wszystko, co znajduje się za owalnym obszarem, prześwituje przez tekst, dając wrażenie wycięcia.

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

Aby w pełni zrozumieć, warto pobawić się i poeksperymentować z kodem. Spróbuj zmienić kolory, tekst i dopasuj rozmiary w tym Codepen.

Właściwość maska-obraz

Obraz można zadeklarować, a mask-image można ustawić na wartość adresu URL. Obraz mask-image ​​może być PNG, SVG lub odniesieniem do elementu mask SVG, jak zademonstrowałem w poprzednim przykładzie.

Ponieważ maskowanie jest używane do częściowego lub całkowitego ukrywania części obiektu lub elementu, najpierw będziesz potrzebować łącza obrazu do pliku dla elementu, który będzie maskowany. Oto jak wygląda ten obraz. Jest kolorowy, aby było bardzo widoczne, którą część maska ​​pokazuje, a którą ukrywa.

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

Do tej pory było dużo kodu SVG, ale ten przykład jest nieco inny, ponieważ będzie obraz rastrowy zamaskowany za pomocą SVG.

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

Właściwość mask-image to miejsce, w którym zostanie zadeklarowany kształt maski. W tym przypadku obraz maski jest grafiką SVG. Uwzględnienie linku URL jest sposobem budowy maski.

Tutaj jest na Codepen.

Łączenie wielu obrazów maski

Właśnie wtedy, gdy myślałeś, że maskowanie nie może być lepsze, istnieje możliwość ustawienia więcej niż jednej warstwy obrazu maski. Wszystko, co musisz zrobić, to dodać dwie wartości adresu URL (lub więcej, jeśli czujesz się ambitny) oddzielone przecinkiem.

Aby rozwinąć prostą maskę z góry, do oryginalnej grafiki zostanie dodana strzałka. Oto sposób połączenia dwóch masek.

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

Wystarczy dodać dwie wartości (z przecinkiem), a teraz są dwie połączone maski, dzięki czemu możliwości maskowania są nieograniczone.

Tutaj jest na Codepen.

Utwórz prosty gradient z mask-image

Nie wszystkie maski muszą mieć skomplikowany kształt. Czasami maską nie jest konkretny obraz, ale raczej prosta maska, taka jak gradient. Jeśli szukasz szybkiego sposobu, aby to osiągnąć, właściwość mask-image jest opcją, która jest dość łatwa do zaimplementowania.

W tym przykładzie zastosowano klasę do gradientu ustawionego jako właściwość mask-image . Dzięki tej prostej deklaracji łatwo było stworzyć na obrazie maskę gradientową.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Zobacz to na Codepen.

Właściwość mask-powtórz

Po utworzeniu jednej maski łatwo jest zrobić więcej. To naprawdę przydaje się, jeśli chcesz stworzyć niestandardowy wzór. Właściwość mask-repeat pozwala na powtórzenie maski. Jeśli kiedykolwiek wcześniej tworzyłeś kafelkowe tło, jest to podobne do tego.

Należy pamiętać o kilku ważnych rzeczach, takich jak rozmiar i rodzaj powtórzenia maski, które należy zadeklarować, aby powstał idealny wzór.

Rozmiar mask-size jest dość łatwy do zwizualizowania, zwłaszcza przy ustawionej tutaj wartości piksela.

mask-size: 200px;
webkit-mask-size: 200px;

Jest jeszcze kilka opcji powtarzania maski, jeśli szukasz innego efektu dla wzoru:

• repeat-x powtarza się wzdłuż współrzędnej x.
• Repeat-y powtarza w dół współrzędną y.
• space powtarza się i rozkłada na dostępnym obszarze.
• round powtarza się kilka razy na dostępnym obszarze (skalowanie pomoże w razie potrzeby wypełnić przestrzeń)

Obsługa przeglądarki

Przed przystąpieniem do tego nowego sposobu pracy z grafiką należy zauważyć, że obsługa przeglądarek nie jest spójna z przycinaniem i maskowaniem. Przycinanie jest bardziej obsługiwane niż maskowanie, ale Internet Explorer nie obsługuje w pełni przycinania. Obecna obsługa masek CSS przez przeglądarki jest również dość ograniczona, dlatego sugeruje się, aby była używana jako ulepszenie kilku elementów dekoracyjnych. W ten sposób, jeśli nie jest obsługiwany przez przeglądarkę użytkownika, nie ma to wpływu na wrażenia z oglądania treści.

Aby przetestować rzeczy i sprawdzić, czy twoje maski i wycinki są obsługiwane, polecam zrobienie JSFiddle lub Codepen, a następnie wypróbowanie go w różnych przeglądarkach. Obsługa przeglądarek wzrosła w ostatnich latach i ostatecznie osiągnie punkt, w którym będzie w pełni obsługiwana. Nie daj się zniechęcić ograniczeniom – zawsze dobrze jest być o krok przed grą, a gdy wsparcie stanie się bardziej powszechne, będziesz dokładnie wiedział, jak zrewolucjonizować swoją grafikę. W razie wątpliwości należy odwołać się do zaufanego Czy mogę użyć.

Po eksperymentowaniu z tymi przykładami powinno to stanowić dobre wprowadzenie do maskowania i przycinania. Chociaż obsługa przeglądarek jest obecnie ograniczona, prawdopodobnie w przyszłości stanie się to powszechną praktyką. Zawsze fajnie jest myśleć o tym, jak te techniki można wykorzystać do tworzenia interesujących efektów wizualnych. Przyszłość grafiki internetowej sprawi, że będziemy mniej zależni od edytorów obrazów i pozwolą na efektywniejsze sposoby tworzenia i modyfikowania obrazów bezpośrednio w przeglądarce.

Dalej: Projektuj witryny jeszcze szybciej!

Rozumiesz znaczenie usprawnionego procesu projektowania stron internetowych. Wszystko, co możesz zrobić, aby szybciej zaprojektować stronę internetową, oznacza więcej pieniędzy w Twojej kieszeni. Dlatego Flywheel zaprojektował naszą platformę hostingową, aby zaoszczędzić Twój czas i zapewnić Ci najlepszą pracę! Dzięki tym wskazówkom i narzędziom do projektowania stron internetowych możesz zrealizować więcej projektów i poświęcić więcej czasu na rozwój firmy.

W tym przewodniku omówimy wskazówki, jak pracować szybciej i przyspieszyć przepływ pracy WordPress. Od początkowej konfiguracji witryny po udostępnienie jej na żywo, odkryj, jak możesz skrócić godziny pracy z codziennej pracy! Pobierz go już dziś.

Ten artykuł został pierwotnie opublikowany 3 sierpnia 2016 r. Ostatnia aktualizacja miała miejsce 6 listopada 2018 r.