Usare la Proprietà Background Clip CSS3 su un testo

Creare una maschera su un oggetto e’ molto semplice realizzandola con Photoshop. Bene oggi vogliamo in questo velocissimo tutorial, creare una maschera ma solo utilizzando le proprieta’ dei CSS3. Alcune di queste proprieta’ ci consentono di creare effetti simili al “overflow”, “clip” e, grazie alla nuova proprieta’ dei CSS3 “background clip“, creare una maschera di un testo. Siete curiosi di vedere come funziona? Non vi preoccupate e’ una pratica molto veloce e una sintassi semplicissima. Allora al lavoro!

La demo e il sorgente del tutorial lo trovate al termine dell’articolo.

Quello che ci serve e’ un testo e un’immagine da applicare al suddetto come maschera. Avendo questi due elementi sfruttando background clip CSS3 siamo in grado di limitare il campo di applicazione dello sfondo (immagine) sul nostro testo.

Procediamo con ordine.

Ho appena detto che ho bisogno di un testo, quindi andiamo a crearci il nostro file HTML:

<h1>Ciao</h1>

Ed il file HTML lo abbiamo costruito. Adesso dobbiamo utilizzare un’ immagine che verra’ applicata come maschera del testo. Io ho scelto questa:

Adesso costruiamo il foglio di stile da applicare al nostro file HTML, introducendo la proprieta’ background clip CSS3:

h1 {
	font-family: Arial;
	font-size: 5em;
	text-align: center;

	background-image: url(Galaxy.jpg);

	-webkit-background-clip: text;
	background-clip: text;

	color: rgba(0,0,0,0);
}

In questo file abbiamo introdotto l’effetto background clip e per renderlo visibile, abbiamo ridotto il coloro di riempimento del nostro testo utilizzando la modalita’ colore RGBA.

Il codice appena inserito ecco l’effetto che produrra’ sul nostro testo:

E’ tutto, e’ un tutorial semplice con una sintassi molto elementare e che ci consente di personalizzare l’effetto in mille modi diversi. Buon divertimento con background clip CSS3!

DEMO|DOWNLOAD SOURCE