Dzięki dodaniu kilku nowych właściwości CSS w ciągu ostatnich kilku lat, programiści frontendowi mogą teraz znacznie łatwiej tworzyć interesujące wizualizacje tekstowe. “Wybijanie” lub “wycinanie” tekstu, gdzie słowa przycinają obraz tła, gradient lub wideo, są możliwe przy bardzo małej ilości kodu.

W tym artykule, zbadamy pięć technik maskowania i przycinania tekstu CSS przy użyciu właściwości background-clip i clip-path.

CSS Gradient Text#

Zacznijmy od stworzenia efektu gradientowego tekstu CSS. Ogólny pomysł polega na ustawieniu gradientu tła za tekstem, a następnie “przycięciu” tła do krawędzi tekstu.

Właściwie wymaga to tylko czterech linii CSS, aby to osiągnąć.

Załóżmy, że mamy h1.

<h1>Gradients</h1>

W CSS, dodajmy gradientowe tło:

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

Jeśli jesteś taki jak ja i nigdy nie możesz zapamiętać dokładnej składni gradientów CSS, sprawdź niesamowite narzędzie do generowania gradientów na coolors.co.

Teraz dodajmy właściwość, która wykonuje przycinanie: background-clip.

Właściwość CSS background-clip ustawia, czy tło elementu rozciąga się pod jego border box, padding box lub content box. – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

Użycie wartości text z tą właściwością pozwala gradientowi tła prześwitywać i przycinać krawędzie tła wewnątrz tekstu.

Ostatnią właściwością, której potrzebujemy, jest kolor tekstu. Powinien on być ustawiony na przezroczysty, aby tło było całkowicie widoczne. Bez tego, prawdopodobnie zobaczysz tylko cienki zarys gradientu.

h1 {...color: transparent;}

Przedrostek -webkit jest w rzeczywistości wymagany dla Chrome i Safari w czasie tego pisania, ponieważ wartość text ma tylko częściowe wsparcie. Dodanie zarówno prefiksowanych, jak i nieprefiksowanych właściwości powinno obsługiwać większość przeglądarek z wyjątkiem Internet Explorera. Jeśli potrzebujesz obsługiwać IE, możesz dodać nieprzezroczysty kolor tekstu jako awaryjny i dołączyć go przed przezroczystym kolorem.

Sprawdź dokumenty background-clip dla pełnej informacji o obsłudze przeglądarki.

CSS Animowany gradient tekstu#

Dla następnego efektu trzymajmy się gradientów i użyjmy animowanego gradientu jako tła tekstu.

<h1>Animated</h1>

I dla CSS:

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

Kontynuujemy używanie właściwości background-clip i ustawiamy kolor tekstu na transparent, tak jak w poprzednim przykładzie.

Ponieważ pracujemy z animacją, musimy ją zdefiniować. Animacja powinna działać w nieskończoność i zmieniać się od lewej do prawej i z powrotem.

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

Na koniec definiujemy klatkę kluczową animacji, która zwiększa wartość background-size, aby uzyskać rzeczywisty ruch animacji.

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

Kolejny przykład znów będzie podobny do tych, które właśnie omówiliśmy. Jedyną różnicą jest to, że użyjemy rzeczywistego obrazu zamiast gradientu jako tła.

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

W naszym przypadku chcemy się upewnić, że obraz tła nie powtarza się i jest wyśrodkowany w pionie i poziomie.

CSS Video Background Text#

Dobra, teraz użyjemy wideo jako tła naszego tekstu. Ten efekt różni się tym, że używa SVG zamiast h1.

Po pierwsze, potrzebujemy div, który zawiera tag video.

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

Na tagu video, dodajemy kilka właściwości: loop autoPlay muted playsInline. Jak na razie, powinno to spowodować zapętlenie filmu na stronie, który odtwarza się automatycznie bez dźwięku.

Teraz style:

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

Najważniejszą właściwością jest clip-path.

Właściwość CSS clip-path tworzy region przycinania, który określa, jaka część elementu powinna być wyświetlana. Części znajdujące się wewnątrz regionu są pokazywane, podczas gdy te poza nim są ukrywane. – MDN Docs

Będzie to miało trochę więcej sensu po dodaniu SVG, ale w zasadzie chcemy użyć ścieżki SVG jako regionu do przycięcia naszego wideo, do czego odnosi się wartość url(#videoText).

Teraz potrzebujemy SVG. Istnieje mnóstwo różnych sposobów na ich tworzenie i eksportowanie, ale ja zazwyczaj używam Figmy lub Sketcha. Wszystko, co naprawdę musisz zrobić, to dodać trochę tekstu w wybranym programie i wyeksportować go jako SVG.

SVG, którego używam poniżej, jest uproszczonym przykładem. Twój będzie miał zwykłe właściwości xmlns, viewBox, i path.

Jak już masz wyeksportowany SVG, jest kilka dodatków do zrobienia. Po pierwsze, musimy dodać element clipPath wokół ścieżki.

Element <clipPath> SVG definiuje ścieżkę przycinania, która ma być używana przez właściwość clip-path.Ścieżka przycinania ogranicza region, do którego można zastosować farbę. Koncepcyjnie, części rysunku, które leżą poza regionem ograniczonym przez ścieżkę przycinania, nie są rysowane. – MDN Docs

Na wysokim poziomie nie różni się to zbytnio od właściwości background-clip, której używaliśmy w poprzednich przykładach.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

Element clipPath powinien mieć identyfikator zgodny z tym, który dodaliśmy w naszym CSS: videoText. Potrzebuje on również właściwości clipPathUnits="objectBoundingBox" oraz wartości.

Ostatnią rzeczą, którą należy dodać są wartości transform. Potrzebujemy ich, ponieważ sam SVG jest celowo ustawiony na wysokość i szerokość równą 0 za pomocą dodanego przez nas CSS. Z tego powodu, musimy przeskalować ścieżkę tak, aby była widoczna.

Aby uzyskać wartości skali, podziel 1 przez wysokość i szerokość. Ponieważ tekst w moim przykładzie ma szerokość 640px i wysokość 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Możesz potrzebować poeksperymentować z tym trochę w zależności od szerokości i wysokości, którą chcesz.

Na koniec dodaj gotowy SVG do .video-container div.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

Dla naszego ostatniego przykładu, stworzymy efekt rozszczepionego koloru tekstu. Istnieje prawdopodobnie kilka różnych sposobów, aby to zrobić, ale mnie udało się to osiągnąć w następujący sposób.

Po pierwsze, potrzebujemy h1, z tym że tym razem dodajemy do niego atrybut data. Zobaczysz dlaczego za chwilę. Chcemy się również upewnić, że wokół h1 znajduje się div.

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

Teraz style.

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

Są tu dwie ważne części:

1. Użycie funkcji attr() CSS. Funkcja ta pobiera atrybut z wybranego elementu i pozwala nam użyć tej wartości w CSS. W naszym przypadku chcemy, aby dodany przez nas atrybut data-text został użyty we właściwości content. To daje nam dwa elementy tekstowe do pracy: oryginalny element h1 i element psuedo.

2. Właściwość clip-path. W poprzednim przykładzie, użyliśmy oddzielnego SVG jako wartości tej właściwości. Robimy coś podobnego, z tym że używamy kształtu polygon. To jest to, co daje wrażenie, że kolor tekstu jest “podzielony”. Używamy kształtu tego polygon do przycięcia czerwonego tekstu pseudo elementu tak, aby był tylko częściowo widoczny, a następnie pozycjonujemy go na wierzchu białego h1 tekstu używając pozycjonowania bezwzględnego.

Na koniec, jednym z ostatnich dodatków jest upewnienie się, że tekst jest nadal wybieralny.

h1::before {...pointer-events: none; /* Make text selectable */}

Bez właściwości pointer-events, pseudo element w rzeczywistości uniemożliwia zaznaczenie części naszego tekstu.

Podsumowanie#

I tak oto masz to: pięć różnych efektów przycinania i maskowania CSS do wypróbowania w następnym projekcie! Przykłady, które opisaliśmy naprawdę tylko zarysowują powierzchnię rzeczy, które możesz zrobić z tymi właściwościami. Niektóre inne opcje mogą obejmować użycie tekstur, bardziej rozbudowanych SVG, oraz różnych typów animacji.