Díky přidání některých nových vlastností CSS v posledních několika letech mohou nyní vývojáři frontendů mnohem snadněji vytvářet zajímavé textové vizuály. “Knockout” nebo “výřez” textu, kdy slova ořezávají obrázek, gradient nebo video na pozadí, jsou možné s velmi malým množstvím kódu.

V tomto článku prozkoumáme pět technik maskování a ořezávání textu CSS pomocí vlastností background-clip a clip-path.

CSS Gradient Text#

Začneme vytvořením gradientního textového efektu CSS. Celková myšlenka spočívá v nastavení gradientu pozadí za nějakým textem a následném “přichycení” pozadí k okrajům textu.

To vlastně vyžaduje pouze čtyři řádky CSS.

Předpokládejme, že máme h1.

<h1>Gradients</h1>

V CSS přidáme gradientní pozadí:

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

Pokud jste jako já a nikdy si nemůžete vzpomenout na přesnou syntaxi gradientů CSS, podívejte se na úžasný nástroj pro generování gradientů na adrese coolors.co.

Nyní přidáme vlastnost, která provede oříznutí: background-clip.

Vlastnost CSS background-clip nastavuje, zda pozadí prvku zasahuje pod jeho rámeček ohraničení, rámeček výplně nebo rámeček obsahu. – MDN Docs

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

Použití hodnoty text s touto vlastností umožňuje, aby gradient pozadí prosakoval a ořezával okraje pozadí uvnitř textu.

Poslední vlastností, kterou potřebujeme, je barva textu. Měla by být nastavena na hodnotu transparentní, aby bylo pozadí zcela viditelné. Bez toho bude pravděpodobně vidět pouze tenký obrys gradientu.

h1 {...color: transparent;}

Předpona -webkit je v době psaní tohoto článku skutečně vyžadována pro prohlížeče Chrome a Safari, protože hodnota text má pouze částečnou podporu. Přidání vlastností s prefixem i bez prefixu by mělo podporovat většinu prohlížečů kromě Internet Exploreru. Pokud potřebujete podporovat IE, můžete přidat neprůhlednou barvu textu jako nouzové řešení a zařadit ji před průhlednou barvu.

Podívejte se do dokumentace background-clip pro kompletní informace o podpoře prohlížečů.

CSS Animated Gradient Text#

Pro další efekt zůstaneme u gradientů a jako pozadí textu použijeme animovaný gradient.

<h1>Animated</h1>

A pro CSS:

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

Pokračujeme v používání vlastností background-clip a nastavíme barvu textu na transparent stejně jako v předchozím příkladu.

Protože pracujeme s animací, musíme ji definovat dále. Animace by měla běžet nekonečně dlouho a střídat se zleva doprava a zpět.

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

Nakonec definujeme klíčový snímek animace, čímž zvýšíme hodnotu background-size, abychom získali skutečný pohyb animace.

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

Obrázkové pozadí textu CSS#

Tento další příklad bude opět podobný těm, které jsme právě probrali. Jediný rozdíl je v tom, že místo gradientu použijeme jako pozadí skutečný obrázek.

<h1>Images</h1>

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

V našem případě chceme zajistit, aby se obrázek na pozadí neopakoval a byl vertikálně i horizontálně vycentrovaný.

CSS Video na pozadí textu#

Dále použijeme video jako pozadí našeho textu. Tento efekt se liší tím, že místo h1 používá SVG.

Nejprve potřebujeme div, který obsahuje značku 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 značku video přidáme několik vlastností: loop autoPlay muted playsInline. Zatím bychom tím měli dosáhnout toho, že se na stránce bude automaticky přehrávat video ve smyčce bez zvuku.

Nyní styly:

.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;}

Nejdůležitější vlastností je zde clip-path.

Vlastnost clip-path CSS vytváří oblast ořezu, která nastavuje, jaká část prvku se má zobrazit. Části, které se nacházejí uvnitř oblasti, se zobrazí, zatímco ty mimo ni se skryjí. – MDN Docs

Toto bude dávat trochu větší smysl, až přidáme SVG, ale v podstatě chceme použít cestu SVG jako oblast, do které ořízneme naše video, jak na to odkazuje hodnota url(#videoText).

Nyní potřebujeme SVG. Existuje spousta různých způsobů, jak je vytvořit a exportovat, ale já obvykle používám Figmu nebo Sketch. Ve skutečnosti stačí ve vybraném programu přidat nějaký text a exportovat ho jako SVG.

Níže uvedený SVG, který používám, je zjednodušený příklad. Ten váš bude mít obvyklé vlastnosti xmlns, viewBox a path.

Jakmile máte SVG vyexportovaný, je třeba provést několik doplňků. Nejprve musíme kolem cesty přidat prvek clipPath.

Prvek <clipPath> SVG definuje ořezovou cestu, která se použije pomocí vlastnosti clip-path. ořezová cesta omezuje oblast, na kterou lze aplikovat barvu. Koncepčně se části kresby, které leží mimo oblast ohraničenou ořezovou cestou, nekreslí. – Dokumenty MDN

Na vysoké úrovni se příliš neliší od vlastnosti background-clip, kterou jsme použili v předchozích příkladech.

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

Prvek clipPath by měl mít ID shodné s tím, které jsme přidali v našem CSS: videoText. Potřebuje také vlastnost clipPathUnits="objectBoundingBox" a hodnotu.

Poslední věc, kterou je třeba přidat, jsou některé hodnoty transform. Ty potřebujeme, protože samotný SVG je záměrně nastaven na výšku a šířku 0 pomocí CSS, které jsme přidali. Z tohoto důvodu potřebujeme cestu opět zvětšit, aby byla viditelná.

Pro získání hodnot měřítka vydělte 1 výškou a šířkou. Protože text v mém příkladu má šířku 640px a výšku 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Možná s tím budete muset trochu experimentovat podle požadované šířky a výšky.

Nakonec přidejte hotový SVG do divu .video-container.

<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#

Pro náš poslední příklad vytvoříme efekt rozděleného barevného textu. Pravděpodobně existuje několik různých způsobů, jak toho dosáhnout, ale mně se to podařilo následujícím způsobem.

Nejprve potřebujeme h1, jenže tentokrát k němu přidáme atribut data. Za chvíli uvidíte proč. Také se chceme ujistit, že kolem h1 je div.

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

Teď ke stylům.

.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;}

Jsou zde dvě důležité části:

1. Použití funkce attr() CSS. Funkce získá atribut z vybraného prvku a umožní nám tuto hodnotu použít v CSS. V našem případě chceme přidaný atribut data-text, abychom jej mohli použít ve vlastnosti content. Tím získáme dva textové prvky, se kterými můžeme pracovat: původní h1 a psuedo prvek.

2. Vlastnost clip-path. V předchozím příkladu jsme jako hodnotu této vlastnosti použili samostatný SVG. Nyní uděláme něco podobného, jen použijeme tvar polygon. Právě ten vytváří dojem, že barva textu je “rozdělená”. Pomocí tvaru tohoto polygon ořízneme červený text pseudoelementu tak, aby byl viditelný jen částečně, a pak jej umístíme na bílý text h1 pomocí absolutního pozicování.

Nakonec ještě poslední doplněk, který zajistí, že text bude stále možné vybrat.

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

Bez vlastnosti pointer-events pseudoelement vlastně brání výběru části našeho textu.

Souhrn#

A tady to máte: pět různých efektů oříznutí a maskování CSS, které můžete vyzkoušet ve svém dalším projektu! Příklady, kterými jsme se zabývali, opravdu jen poškrábaly povrch toho, co všechno můžete s těmito vlastnostmi dělat. Některé další možnosti mohou zahrnovat použití textur, propracovanějších SVG a různých typů animací.