Cu adăugarea unor noi proprietăți CSS în ultimii ani, dezvoltatorii de frontend pot crea acum mult mai ușor efecte vizuale de text interesante. Textul “Knockout” sau “decupaj”, în care cuvintele decupează o imagine de fundal, un gradient sau un videoclip, sunt posibile cu foarte puțin cod.

În acest articol, vom explora cinci tehnici CSS de mascare și decupare a textului folosind proprietățile background-clip și clip-path.

CSS Gradient Text#

Să începem prin a crea un efect de text gradient CSS. Ideea generală este să setați un gradient de fundal în spatele unui text și apoi să “tăiați” fundalul la marginile textului.

De fapt, acest lucru necesită doar patru linii de CSS pentru a fi realizat.

Să presupunem că avem un h1.

<h1>Gradients</h1>

În CSS, să adăugăm un fundal cu gradient:

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

Dacă sunteți ca mine și nu vă puteți aminti niciodată sintaxa exactă pentru gradienții CSS, consultați minunatul instrument generator de gradienți de la coolors.co.

Acum să adăugăm proprietatea care face decuparea: background-clip.

Proprietatea CSS background-clip stabilește dacă fundalul unui element se extinde sub caseta sa de margine, caseta de umplutură sau caseta de conținut. – MDN Docs

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

Utilizarea valorii text cu această proprietate permite ca gradientul de fundal să se prelingă și să decupeze marginile fundalului în interiorul textului.

Ultima proprietate de care avem nevoie este o culoare a textului. Aceasta ar trebui să fie setată la transparent, astfel încât fundalul să fie complet vizibil. Fără aceasta, probabil că veți vedea doar un contur subțire al gradientului.

h1 {...color: transparent;}

Prefixul -webkit este de fapt necesar pentru Chrome și Safari la momentul scrierii acestui articol, deoarece valoarea text are doar un suport parțial. Adăugarea atât a proprietăților cu prefix, cât și a celor fără prefix ar trebui să ofere suport pentru majoritatea browserelor, în afară de Internet Explorer. Dacă trebuie să suportați IE, puteți adăuga o culoare de text netransparentă ca soluție de rezervă și să o includeți înainte de culoarea transparentă.

Verificați documentația background-clip pentru informații complete despre suportul pentru browsere.

CSS Animated Gradient Text#

Pentru următorul efect, haideți să rămânem la gradienți și să folosim un gradient animat ca fundal de text.

<h1>Animated</h1>

Și pentru CSS:

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

Continuăm să folosim proprietățile background-clip și setăm culoarea textului la transparent la fel ca în exemplul anterior.

Din moment ce lucrăm cu animație, trebuie să o definim în continuare. Animația ar trebui să ruleze la infinit și să alterneze de la stânga la dreapta și invers.

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

În cele din urmă definim cadrul cheie al animației, care mărește valoarea background-size pentru a obține mișcarea efectivă a animației.

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

CSS Image Background Text#

Acest exemplu următor va fi din nou similar cu cele pe care tocmai le-am acoperit. Singura diferență este că vom folosi o imagine reală în loc de un gradient ca fundal.

<h1>Images</h1>

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

În cazul nostru, vrem să ne asigurăm că imaginea de fundal nu se repetă și că este centrată vertical și orizontal.

CSS Video Background Text#

În regulă, în continuare vom folosi un video ca fundal al textului nostru. Acest efect este diferit prin faptul că folosește un SVG în loc de un h1.

În primul rând, avem nevoie de un div care să conțină o etichetă 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>

Pe eticheta video, adăugăm câteva proprietăți: loop autoPlay muted playsInline. Până acum, acest lucru ar trebui să vă ofere un videoclip în buclă pe pagină, care se redă automat fără sunet.

Acum stilurile:

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

Cea mai importantă proprietate de aici este clip-path.

Proprietatea CSS clip-path creează o regiune de decupare care stabilește ce parte a unui element trebuie să fie afișată. Părțile care se află în interiorul regiunii sunt afișate, în timp ce cele din afara acesteia sunt ascunse. – MDN Docs

Acest lucru va avea ceva mai mult sens după ce adăugăm SVG-ul, dar, în principiu, dorim să folosim calea SVG ca regiune în care să decupăm videoclipul nostru, așa cum se face referire prin valoarea url(#videoText).

Acum avem nevoie de un SVG. Există o mulțime de moduri diferite de a le crea și exporta, dar eu folosesc de obicei Figma sau Sketch. Tot ce trebuie să faceți cu adevărat este să adăugați un text în programul pe care îl alegeți și să-l exportați ca SVG.

SVG-ul pe care îl folosesc mai jos este un exemplu simplificat. Al dvs. va avea proprietățile obișnuite xmlns, viewBox și path.

După ce aveți un SVG exportat, sunt câteva adăugiri de făcut. În primul rând, trebuie să adăugăm un element clipPath în jurul căii.

Elementul <clipPath> SVG definește o cale de decupare care va fi folosită de proprietatea clip-path.O cale de decupare restricționează regiunea la care se poate aplica vopseaua. Conceptual, părțile desenului care se află în afara regiunii delimitate de calea de decupare nu sunt desenate. – MDN Docs

La un nivel înalt, nu este prea diferită de proprietatea background-clip pe care am folosit-o în exemplele anterioare.

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

Elementul clipPath ar trebui să aibă un ID care să se potrivească cu cel pe care l-am adăugat în CSS-ul nostru: videoText. De asemenea, are nevoie de o proprietate și o valoare clipPathUnits="objectBoundingBox".

Ultimul lucru care trebuie adăugat sunt câteva valori transform. Avem nevoie de acestea deoarece SVG-ul în sine este setat în mod intenționat la o înălțime și o lățime de 0 cu ajutorul CSS-ului pe care l-am adăugat. Din această cauză, trebuie să redimensionăm traseul pentru ca acesta să fie vizibil.

Pentru a obține valorile scalei, împărțiți 1 la înălțime și lățime. Deoarece textul din exemplul meu are o lățime de 640px și o înălțime de 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Ar putea fi nevoie să experimentați puțin cu acest lucru în funcție de lățimea și înălțimea pe care le doriți.

În cele din urmă, adăugați SVG-ul terminat în div-ul .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#

Pentru ultimul nostru exemplu, vom crea un efect de text cu culoare divizată. Există probabil câteva moduri diferite de a face acest lucru, dar eu am reușit să îl realizez cu următoarele.

În primul rând, avem nevoie de un h1, doar că de data aceasta îi adăugăm un atribut data. Veți vedea de ce într-un minut. De asemenea, vrem să ne asigurăm că există un div în jurul lui h1.

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

Acum pentru stiluri.

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

Există două părți importante aici:

1. Utilizarea funcției CSS attr(). Funcția obține un atribut din elementul selectat și ne permite să folosim acea valoare în CSS. În cazul nostru, dorim atributul data-text pe care l-am adăugat, astfel încât să-l putem folosi în proprietatea content. Acest lucru ne oferă două elemente de text cu care să lucrăm: h1 original și elementul psuedo.

2. Proprietatea clip-path. În exemplul anterior, am folosit un SVG separat ca valoare a acestei proprietăți. Facem ceva similar, doar că folosim o formă polygon. Aceasta este ceea ce dă aspectul de “divizare” a culorii textului. Folosim forma acestui polygon pentru a decupla textul pseudo-elementului roșu astfel încât să fie doar parțial vizibil, iar apoi îl poziționăm deasupra textului alb h1 folosind poziționarea absolută.

În cele din urmă, o ultimă adăugire este aceea de a ne asigura că textul este încă selectabil.

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

Fără proprietatea pointer-events, pseudo-elementul împiedică, de fapt, ca o parte din textul nostru să fie selectat.

Summary#

Și iată-l: cinci efecte CSS diferite de decupare și mascare pe care să le încercați în următorul proiect! Exemplele pe care le-am acoperit nu fac decât să zgârie cu adevărat suprafața lucrurilor pe care le puteți face cu aceste proprietăți. Alte opțiuni ar putea implica utilizarea de texturi, SVG-uri mai elaborate și diferite tipuri de animație.

.