background-clip con i CSS3

Background-Clip con CSS3

Si sente molto spesso parlare di CSS3 e degli effetti e animazioni che è possibile applicare alle nostre pagine HTML grazie a questo linguaggio, ma quando si trova talmente tanta informazione riguardanti alcuni aspetti di un linguaggio il più delle volte si rischia allo stesso tempo di far scivolare qualche argomento nell'ombra.  

Oggi ci troviamo ad analizzare una vecchia proprietà CSS, la proprietà background, che grazie all’aggiornamento dei fogli di stile ha ricevuto anch’essa un utile miglioramento.

Il miglioramento di cui parliamo è la possibilità di poter definire quanto il nostro sfondo, che sia esso un colore o una immagine, dovrà estendersi verso i margini del nostro box grazie alla proprietà background-clip.

Questa nuova proprietà permette a tutti noi di definire esplicitamente se lo sfondo del nostro contenitore dovrà espandersi per lo spazio riservato al nostro contenuto, tramite il valore content-box, se dovrà espandersi per tutta l’ampiezza del padding creato per l’elemento in questione, tramite il valore padding-box, oppure se dovrà espandersi per raggiungere anche l’ampiezza dei bordi che sono stati applicati al box stesso e indovinate quale valore utilizzeremo… Ma certamente padding-box.

Chiariamo i Dubbi

Molto probabilmente tra di voi ci saranno persone confuse, come lo ero io la prima volta che mi sono trovato a studiare questa nuova proprietà, ma come sempre la bellezza di lavorare con un metalinguaggio come l’HTML e in questo caso specifico con i CSS è che possiamo tranquillamente fare degli esperimenti mostrando del semplice codice! Per prima cosa prendiamo la struttura HTML necessaria:

Come possiamo notare dal semplicissimo markup introdotto tutto quello che abbiamo inserito sono stati tre div che condividono la stessa classe, che ci servrà per impostare l’immagine di sfondo e gli stili di base delle nostre box, inoltre abbiamo aggiunto a ciascuno un identificatore che ci permetterà successivamente di impostare la proprietà background-clip. Ma prima di andare a vedere il codice CSS, voglio lasciarvi la possibilità di scaricare e vedere un ingrandimento dell’immagine che andremo ad utilizzare come sfondo:

ingrandimento pattern background-clip

Bene l’immagine che abbiamo scelto per questo esperimento è un pattern scuro e quindi nel CSS che andremo ad inserire ricordiamoci anche di impostare un carattere chiaro per notare con occhio le differenze. Ecco il codice CSS che sarà necessario per i nostri esperimenti:

Niente di speciale vero? Abbiamo semplicemente dato delle regole generali per impostare dimenzioni e direzioni dei nostri div e utilizzato gli id per impostare i valori della proprietà background-clip, andiamo a vedere il risultato!

Risultato esperimento background-clip

Conclusioni

Ecco spiegata un altra delle piccole migliorie apportate con la nuova versione dei CSS. Ci sono ancora piccole cose da notare però. Per prima cosa è il fatto che in questo esempio abbiamo utilizzato un bordo trasparente, se il suo colore fosse stato impostato diversamente il valore border-box non sarebbe stato comunque in grado di espandere lo sfondo fino a raggiungere l’ampiezza del bordo, questo perché il colore del bordo avrebbe sovrascritto quello di sfondo, discorso diverso se invece avessimo impostato il colore del bordo con un canale alpha (rgba o hsla), in questo caso saremmo in grado di creare anche interessanti effetti…

Un altra cosa che dobbiamo notare invece è che se questa proprietà viene omessa, il nostro sfondo andrà ad occupare tutto lo spazio necessario, comportandosi proprio come se il valore dato alla proprietà background-clip fosse border-box, quindi a meno che non vogliate utilizzare i valori padding-box o content-box potrete anche omettere questa proprietà.

Lascia il tuo Pensiero