Probabilmente hai familiarità con l'utilizzo del testo per mascherare un'immagine in Photoshop; è il modo più conosciuto per aggiungere al testo una texture o anche uno sfondo di immagine. Puoi quindi utilizzare quel testo come immagine sul tuo sito web; tuttavia, non sarebbe bello se potessi applicare lo stesso effetto usando solo HTML e CSS? La buona notizia è che puoi!

I CSS hanno introdotto proprietà come background-clip e mask-image che puoi usare per creare effetti simili a quelli che stai creando in Photoshop. Oltre a questo, puoi anche usare SVG per ritagliare un'immagine con il testo.

Oggi guarderemo le opzioni e introdurremo anche delle semplici animazioni. Se vuoi seguire il codice, puoi farlo scarica qui i file.

Supporto per il browser

Prevedibilmente, alcune delle proprietà che utilizzeremo non sono universalmente supportate, il che significa che non funzioneranno in browser come IE e Firefox. La buona notizia è che queste proprietà falliranno silenziosamente, il che significa che queste tecniche sono un miglioramento progressivo e possono essere utilizzate nei siti.

Ritaglio del testo usando la clip di sfondo

La prima opzione che vedremo è la proprietà background-clip . Questa proprietà definirà se lo sfondo verrà esteso o meno al bordo. Permette al testo di un elemento definito di ritagliare un'immagine.

L'HTML

Il nostro markup è semplicemente un h1 con la classe bgClip:

Clip Text

Ora, aggiungiamo la magia con CSS ...

Il CSS

Aggiungeremo consistenza al nostro testo con un'immagine del cielo notturno. Ci assicureremo inoltre che il testo sia reso uniforme usando il font-smoothing. Nota che per far funzionare il colore del testo deve essere trasparente, quindi utilizzeremo anche text-fill-color: transparent.

.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;

Ora vogliamo solo aggiungere una piccola animazione per rendere lo sfondo più allettante:

    -webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {<     from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}

Ecco il risultato:

Mascherare il testo usando maschera-immagine

L'ultima tecnica che vedremo è la texturizzazione del testo con l' immagine della maschera. La funzionalità di base di questa proprietà è che ritaglierà l'area del testo visibile in base all'opacità.

L'HTML

Tutto ciò di cui abbiamo bisogno è un elemento h1 avvolto in un div:

Mask Text

Il CSS

Per mascherare l'immagine con il testo useremo l'immagine -webkit-mask-per specificare l'immagine e aggiungeremo anche una bella ombra di testo per una buona misura. Infine, voglio fare un po 'di liscio effetto hover per rivelare l'intero testo al passaggio del mouse (solo perché possiamo):

#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}

Ecco il risultato: