Le maschere di testo, sviluppate appunto con una tecnica chiamata "text masking", sono una tecnica decorativa di web design che consente di riempire un testo con immagini, sfumature o gif animate. Questo effetto può dare un tocco artistico e accattivante ai titoli, ai paragrafi e ad altri elementi di testo sul tuo sito web. Vediamo quindi come creare maschere di testo utilizzando solo CSS e HTML.
Cos'è una maschera di testo?
Una maschera di testo è un effetto grafico in cui il testo funge da "maschera" per un'immagine, una gif animata o un gradiente sottostante. In altre parole, il testo diventa una finestra attraverso la quale si può vedere un'immagine o un altro tipo di contenuto grafico.
Le maschere di testo sono particolarmente utili per:
- Migliorare l'estetica del sito web: aggiungono un livello di eleganza e modernità al design.
- Creare effetti unici e personalizzati: consentono di creare stili di testo che catturano l'attenzione.
- Rendere i titoli più coinvolgenti: i titoli e gli header con maschere di testo possono risaltare in modo significativo rispetto al resto del contenuto.
Il codice HTML
Iniziamo quindi con una semplice maschera di testo utilizzando un'immagine di sfondo. Supponiamo di voler applicare una maschera di testo a un titolo (<h1>). Partiamo dalla scrittura del Codice HTML che permette di creare la struttura:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maschera di Testo con CSS</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="maschera-testo">
<h1>Testo con Maschera</h1>
</div>
</body>
</html>Questo codice rappresenta una struttura di base di una pagina web che al momento presenta un semplice testo al quale non è ancora stato applicato nessuno stile.
Il codice CSS
Passiamo ora alla scrittura del codice CSS necessario per definire lo stile di tutti gli elementi presenti:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
.maschera-testo {
font-size: 80px;
font-weight: bold;
text-align: center;
background: url('url-immagine.jpg') no-repeat center;
background-size: cover;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
h1 {
margin: 0;
line-height: 1.2;
}
background: imposta l'immagine di sfondo che verrà mostrata all'interno del testo.color: transparent;: rende il testo trasparente in modo che si possa vedere l'immagine sottostante.-webkit-background-clip: text;ebackground-clip: text;:: permettono di "clippare" il background all'interno del testo. Sono essenziali per creare l'effetto maschera.
Creazione di maschere di testo con sfumature
Puoi anche usare una sfumatura (gradiente) anziché un'immagine per creare un effetto di maschera di testo. Aggiorniamo quindi l'elemento .maschera-testo variando il background con una sfumatura che darà vita di conseguenza al risultato desiderato
.maschera-testo {
background: linear-gradient(45deg, #ff6b6b, #f3c623);
}
Creazione di maschere di testo con gif animata
Vediamo infine come creare una mascheratura animata. Questo effetto visivo combina la dinamicità del formato GIF con la tipografia, creando un testo che non solo comunica un messaggio ma cattura l'attenzione grazie al movimento continuo e coinvolgente delle immagini animate. Anche in questo caso per creare una mascheratura animata non dovremo fare altro che sostituire alla proprietà background un elemento animato di tipo gif.
Ecco il codice CSS per maschere una mascherature con movimento:
.maschera-testo {
background: url(elemento.gif) no-repeat center;
}
Abbiamo esplorato diverse tecniche per creare maschere di testo utilizzando HTML e CSS, dimostrando come queste semplici tecnologie possano essere utilizzate per ottenere effetti visivi sorprendenti. Dalle immagini statiche alle sfumature ed alle animazioni, le maschere di testo offrono un modo creativo per arricchire il design del tuo sito web e catturare l'attenzione dei visitatori.
Ora che conosci le basi, non ti resta che mettere in pratica ciò che hai imparato e creare maschere di testo che rendono unici i tuoi progetti.
