Az elmúlt években néhány új CSS-tulajdonsággal kiegészülve a frontend-fejlesztők sokkal könnyebben tudnak érdekes szöveges látványelemeket létrehozni. A “Knockout” vagy “kivágott” szöveg, ahol a szavak egy háttérképet, gradienst vagy videót vágnak ki, nagyon kevés kóddal lehetséges.

Ebben a cikkben öt CSS szövegmaszkírozási és kivágási technikát vizsgálunk meg a background-clip és clip-path tulajdonságok segítségével.

CSS Gradient Text#

Kezdjük egy CSS gradiens szöveghatás létrehozásával. Az alapötlet az, hogy egy szöveg mögé beállítunk egy gradiens hátteret, majd a hátteret a szöveg széleihez “vágjuk”.

Ez valójában csak négy CSS-sort igényel.

Tegyük fel, hogy van egy h1.

<h1>Gradients</h1>

A CSS-ben adjunk hozzá egy gradiens hátteret:

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

Ha olyan vagy, mint én, és sosem emlékszel a CSS-gradiensek pontos szintaxisára, nézd meg a coolors.co fantasztikus gradiensgenerátor eszközét.

Most adjuk hozzá azt a tulajdonságot, amely a levágást végzi: background-clip.

A background-clip CSS-tulajdonság beállítja, hogy egy elem háttere benyúlik-e a keretdoboz, a kitöltődoboz vagy a tartalmi doboz alá. – MDN Docs

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

A text érték használata ezzel a tulajdonsággal lehetővé teszi, hogy a háttér gradiens átfolyjon és a szövegben levágja a háttér széleit.

Az utolsó tulajdonság, amire szükségünk van, a szöveg színe. Ezt átlátszó értékre kell állítani, hogy a háttér teljesen látható legyen. Enélkül valószínűleg csak a gradiens vékony körvonala lesz látható.

h1 {...color: transparent;}

A -webkit előtag e cikk írásakor a Chrome és a Safari esetében valóban szükséges, mivel a text érték csak részben támogatott. Az előtaggal és az előtag nélküli tulajdonságok hozzáadása az Internet Explorer kivételével a legtöbb böngészőt támogatja. Ha támogatni kell az IE-t, akkor tartalékként hozzáadhat egy nem átlátszó szövegszínt, és azt az átlátszó szín elé illesztheti be.

A teljes böngészőtámogatási információért nézze meg a background-clip dokumentációt.

CSS Animated Gradient Text#

A következő hatásnál maradjunk a gradienseknél, és használjunk animált gradienst a szöveg háttereként.

<h1>Animated</h1>

És a CSS-hez:

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

Folytatjuk a background-clip tulajdonságok használatát, és a szöveg színét transparent-re állítjuk, akárcsak az előző példában.

Mivel animációval dolgozunk, azt kell definiálnunk a következőkben. Az animációnak végtelenül kell futnia, és balról jobbra és vissza kell váltakoznia.

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

Végül definiáljuk az animáció kulcskockáját, ami növeli a background-size értéket, hogy megkapjuk a tényleges animációs mozgást.

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

CSS Image Background Text#

A következő példa ismét hasonló lesz a most tárgyaltakhoz. Az egyetlen különbség az, hogy egy tényleges képet fogunk használni háttérként egy gradiens helyett.

<h1>Images</h1>

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

A mi esetünkben arra szeretnénk ügyelni, hogy a háttérkép ne ismétlődjön, és függőlegesen és vízszintesen is középen legyen.

CSS videó háttérszöveg#

Jól van, a következőkben videót fogunk használni a szövegünk háttereként. Ez a hatás annyiban különbözik, hogy h1 helyett SVG-t használ.

Először is szükségünk van egy div-re, amely egy video taget tartalmaz.

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

A video taghez hozzáadunk néhány tulajdonságot: loop autoPlay muted playsInline. Ezzel eddig egy olyan videót kell létrehoznunk az oldalon, amely automatikusan lejátszódik hang nélkül.

Most a stílusok:

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

A legfontosabb tulajdonság itt a clip-path.

A clip-path CSS tulajdonság egy vágási régiót hoz létre, amely meghatározza, hogy az elem melyik része jelenjen meg. A régión belüli részek megjelennek, míg a régión kívüliek el vannak rejtve. – MDN Docs

Ez egy kicsit több értelmet nyer, miután hozzáadtuk az SVG-t, de alapvetően az SVG útvonalát akarjuk használni a videónk vágási régióként, amire a url(#videoText) érték utal.

Most szükségünk van egy SVG-re. Rengeteg különböző módja van ezek létrehozásának és exportálásának, de én általában a Figmát vagy a Sketchet használom. Igazából csak annyit kell tenned, hogy a választott programodban hozzáadsz némi szöveget, és SVG-ként exportálod.

Az alábbi SVG, amit használok, egy egyszerűsített példa. A tiéd a szokásos xmlns, viewBox és path tulajdonságokkal fog rendelkezni.

Ha már exportáltál egy SVG-t, néhány kiegészítést kell tenned. Először is hozzá kell adnunk egy clipPath elemet az útvonal köré.

A <clipPath> SVG elem meghatározza a clip-path tulajdonság által használandó vágási útvonalat.A vágási útvonal korlátozza azt a régiót, amelyre a festés alkalmazható. Fogalmilag a rajz azon részei, amelyek a vágási útvonal által határolt régión kívül helyezkednek el, nem rajzolódnak ki. – MDN Docs

Nagyjából nem sokban különbözik az előző példákban használt background-clip tulajdonságtól.

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

A clipPath elemnek olyan azonosítóval kell rendelkeznie, amely megegyezik azzal, amelyet a CSS-ben adtunk hozzá: videoText. Szüksége van továbbá egy clipPathUnits="objectBoundingBox" tulajdonságra és értékre.

Az utolsó dolog, amit hozzá kell adni, néhány transform érték. Ezekre azért van szükségünk, mert maga az SVG szándékosan 0 magasságú és szélességűre van beállítva az általunk hozzáadott CSS segítségével. Emiatt vissza kell méreteznünk az útvonalat, hogy látható legyen.

A méretezési értékek származtatásához osszuk el 1-et a magassággal és a szélességgel. Mivel a példámban szereplő szöveg szélessége 640px, magassága pedig 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

A kívánt szélességtől és magasságtól függően ezzel egy kicsit kísérleteznie kell.

Végül add a kész SVG-t a .video-container div-be.

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

Az utolsó példánkhoz egy osztott színű szöveghatást fogunk létrehozni. Ennek valószínűleg többféle módja is van, de én a következőkkel tudtam megvalósítani.

Először is szükségünk van egy h1-ra, csak ezúttal egy data attribútumot adunk hozzá. Egy perc múlva látni fogod, hogy miért. Arról is gondoskodnunk kell, hogy a h1 körül egy div legyen.

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

Következzenek a stílusok.

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

Itt két fontos rész van:

1. A attr() CSS függvény használata. A függvény kinyer egy attribútumot a kiválasztott elemből, és lehetővé teszi, hogy ezt az értéket CSS-ben használjuk. Esetünkben az általunk hozzáadott data-text attribútumot szeretnénk, hogy a content tulajdonságban használhassuk. Így két szövegelemmel dolgozhatunk: az eredeti h1 és a psuedo elemmel.

2. A clip-path tulajdonság. Az előző példában egy külön SVG-t használtunk ennek a tulajdonságnak az értékeként. Mi is valami hasonlót csinálunk, csak most egy polygon alakzatot használunk. Ez adja azt a látszatot, mintha a szöveg színe “osztott” lenne. Ennek az polygon alakzatnak a segítségével vágjuk le a piros pszeudoelem szövegét, hogy az csak részben legyen látható, majd abszolút pozicionálással a fehér h1 szöveg tetejére pozicionáljuk.

Végül egy utolsó kiegészítéssel biztosítjuk, hogy a szöveg továbbra is kiválasztható maradjon.

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

A pointer-events tulajdonság nélkül az álelem valójában megakadályozza, hogy a szövegünk egy része kijelölhető legyen.

Summary#

És itt is van: öt különböző CSS-clipping és maszkhatás, amit kipróbálhatsz a következő projektedben! Az általunk ismertetett példák valójában csak a felszínét karcolják annak, amit ezekkel a tulajdonságokkal tehetsz. Néhány további lehetőség lehet textúrák, bonyolultabb SVG-k és különböző típusú animációk használata.