Con l’aggiunta di alcune nuove proprietà CSS negli ultimi anni, gli sviluppatori frontend possono ora creare testi interessanti molto più facilmente. Testo “Knockout” o “cutout”, dove le parole ritagliano un’immagine di sfondo, un gradiente o un video, sono possibili con pochissimo codice.

In questo articolo, esploreremo cinque tecniche di mascheramento e ritaglio del testo CSS usando le proprietà background-clip e clip-path.

CSS Gradient Text#

Cominciamo a creare un effetto di testo gradiente CSS. L’idea generale è quella di impostare un gradiente di sfondo dietro al testo e poi “ritagliare” lo sfondo ai bordi del testo.

Questo in realtà richiede solo quattro linee di CSS per essere realizzato.

Prevediamo di avere un h1.

<h1>Gradients</h1>

In CSS, aggiungiamo uno sfondo gradiente:

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

Se siete come me e non riuscite mai a ricordare la sintassi esatta per i gradienti CSS, date un’occhiata al fantastico strumento generatore di gradienti su coolors.co.

Ora aggiungiamo la proprietà che fa il clipping: background-clip.

La proprietà CSS background-clip imposta se lo sfondo di un elemento si estende sotto il suo box di confine, il suo padding box o il suo content box. – MDN Docs

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

Utilizzare il valore text con questa proprietà permette al gradiente di sfondo di sanguinare attraverso e tagliare i bordi dello sfondo all’interno del testo.

L’ultima proprietà di cui abbiamo bisogno è un colore del testo. Dovrebbe essere impostato su trasparente in modo che lo sfondo sia completamente visibile. Senza questo, probabilmente vedrai solo un sottile contorno del gradiente.

h1 {...color: transparent;}

Il prefisso -webkit è effettivamente richiesto per Chrome e Safari al momento di questo scritto perché il valore text ha solo un supporto parziale. L’aggiunta di entrambe le proprietà con prefisso e senza prefisso dovrebbe supportare la maggior parte dei browser a parte Internet Explorer. Se hai bisogno di supportare IE, puoi aggiungere un colore di testo non trasparente come fallback e includerlo prima del colore trasparente.

Controlla la documentazione di background-clip per informazioni complete sul supporto del browser.

CSS Animated Gradient Text#

Per il prossimo effetto, rimaniamo sui gradienti e usiamo un gradiente animato come sfondo del testo.

<h1>Animated</h1>

E per il CSS:

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

Continuiamo a usare le proprietà background-clip, e impostiamo il colore del testo a transparent proprio come nell’esempio precedente.

Siccome stiamo lavorando con l’animazione, dobbiamo definirla. L’animazione dovrebbe correre all’infinito e alternarsi da sinistra a destra e viceversa.

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

Infine definiamo il keyframe dell’animazione, che aumenta il valore background-size per ottenere il movimento effettivo dell’animazione.

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

Testo di sfondo immagine CSS#

Questo prossimo esempio sarà di nuovo simile a quelli appena trattati. L’unica differenza è che useremo un’immagine reale invece di un gradiente come sfondo.

<h1>Images</h1>

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

Nel nostro caso, vogliamo essere sicuri che l’immagine di sfondo non si ripeta e sia centrata verticalmente e orizzontalmente.

CSS Video Background Text#

Va bene, ora useremo un video come sfondo del nostro testo. Questo effetto è diverso in quanto utilizza un SVG invece di un h1.

Prima di tutto, abbiamo bisogno di un div che contiene un 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>

Sul tag video, aggiungiamo alcune proprietà: loop autoPlay muted playsInline. Finora, questo dovrebbe farti avere un video in loop sulla pagina che viene riprodotto automaticamente senza suono.

Ora gli stili:

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

La proprietà più importante qui è clip-path.

La proprietà clip-path CSS crea una regione di ritaglio che imposta quale parte di un elemento dovrebbe essere mostrata. Le parti che sono all’interno della regione sono mostrate, mentre quelle al di fuori sono nascoste. – MDN Docs

Questo avrà un po’ più senso dopo che avremo aggiunto l’SVG, ma fondamentalmente vogliamo usare il percorso SVG come regione di ritaglio del nostro video, come indicato dal valore url(#videoText).

Ora abbiamo bisogno di un SVG. Ci sono tonnellate di modi diversi per crearli ed esportarli, ma io di solito uso Figma o Sketch. Tutto quello che devi fare è aggiungere del testo nel tuo programma preferito ed esportarlo come SVG.

L’SVG che uso qui sotto è un esempio semplificato. Il tuo avrà le solite proprietà xmlns, viewBox e path.

Una volta esportato un SVG, ci sono alcune aggiunte da fare. Per prima cosa, abbiamo bisogno di aggiungere un elemento clipPath intorno al percorso.

L’elemento SVG <clipPath> definisce un percorso di ritaglio da usare con la proprietà clip-path.Un percorso di ritaglio limita la regione a cui può essere applicato il colore. Concettualmente, le parti del disegno che si trovano al di fuori della regione delimitata dal percorso di ritaglio non vengono disegnate. – MDN Docs

Ad alto livello, non è troppo diverso dalla proprietà background-clip che abbiamo usato negli esempi precedenti.

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

L’elemento clipPath dovrebbe avere un ID che corrisponde a quello che abbiamo aggiunto nel nostro CSS: videoText. Ha anche bisogno di una proprietà clipPathUnits="objectBoundingBox" e di un valore.

L’ultima cosa da aggiungere sono alcuni valori transform. Abbiamo bisogno di questi perché l’SVG stesso è intenzionalmente impostato su un’altezza e una larghezza di 0 con il CSS che abbiamo aggiunto. A causa di ciò, abbiamo bisogno di ridimensionare il percorso in modo che sia visibile.

Per ricavare i valori di scala, dividete 1 per l’altezza e la larghezza. Poiché il testo nel mio esempio ha una larghezza di 640px e un’altezza di 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Potresti dover sperimentare un po’ con questo a seconda della larghezza e dell’altezza che vuoi.

Infine, aggiungi l’SVG finito nel .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#

Per il nostro ultimo esempio, creeremo un effetto testo a colori diviso. Ci sono probabilmente alcuni modi diversi per farlo, ma sono stato in grado di realizzarlo con quanto segue.

Prima di tutto, abbiamo bisogno di un h1, solo che questa volta gli aggiungiamo un attributo data. Vedrete il perché tra un minuto. Vogliamo anche assicurarci che ci sia un div intorno al h1.

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

Ora per gli stili.

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

Ci sono due parti importanti qui:

1. L’uso della funzione attr() CSS. La funzione ottiene un attributo dall’elemento selezionato e ci permette di usare quel valore nel CSS. Nel nostro caso, vogliamo l’attributo data-text che abbiamo aggiunto in modo da poterlo usare nella proprietà content. Questo ci dà due elementi di testo con cui lavorare: l’originale h1 e l’elemento psuedo.

2. La proprietà clip-path. Nell’esempio precedente, abbiamo usato un SVG separato come valore di questa proprietà. Stiamo facendo qualcosa di simile, ma usando una forma polygon. Questo è ciò che dà l’apparenza che il colore del testo sia “diviso”. Stiamo usando la forma di questo polygon per tagliare il testo rosso dello pseudo elemento in modo che sia solo parzialmente visibile, e poi posizionarlo sopra il testo bianco h1 usando il posizionamento assoluto.

Finalmente, un’ultima aggiunta è assicurarsi che il testo sia ancora selezionabile.

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

Senza la proprietà pointer-events, lo pseudo elemento sta effettivamente impedendo al nostro testo di essere selezionato.

Sommario#

Eccovi: cinque diversi effetti di ritaglio e mascheramento CSS da provare nel vostro prossimo progetto! Gli esempi che abbiamo coperto graffiano davvero solo la superficie delle cose che si possono fare con queste proprietà. Alcune altre opzioni potrebbero coinvolgere l’uso di texture, SVG più elaborati e diversi tipi di animazione.