Border-image

Link copiato negli appunti

Insieme a border-radius, la seconda novità rilevante introdotta dalla specifica CSS3 rispetto alla definizione di bordi riguarda la proprietà border-image. Attraverso border-image è possibile assegnare delle immagini ai quattro bordi di un elemento.

L'idea è sicuramente buona, potenzialmente molto utile in tutti quei casi in cui si vogliano creare dei box particolarmente estrosi che ospitino testo o immagini al loro interno. Il problema è che l'implementazione definita nella specifica non è certo tra le più intuitive. A ciò si aggiunga che negli ultimi mesi la specifica stessa ha subito modifiche sostanziali, per cui in molti casi i rendering engine dei browser che gestiscono border-image supportano qualcosa che non esiste più nei documenti del W3C.

Essendo il supporto sperimentale, Firefox usa per definire la proprietà il prefisso -moz-, Safari e Chrome il prefisso -webkit-, Opera supporta invece la proprietà nella sua forma standard, senza prefissi proprietari.

Come funziona

Partiremo da un esempio. Il codice che segue è relativo al riquadro indicato come 'Box 1' e che ha come id border:

#border {
 width: 200px;
 padding: 10px;
 border: 27px solid black;
 -webkit-border-image: url(border.png) 27 27 27 27 round round;
 -moz-border-image: url(border.png) 27 27 27 27 round round;
 border-image: url(border.png) 27 27 27 27 round round;
}

Le regole per larghezza e padding non hanno influenza sui bordi.

La parte che ci interessa inizia con la regola border: 27px solid black. Quando si usa border-image, infatti, bisogna sempre e comunque definire una larghezza per il bordo dell'elemento tramite la consueta proprietà border. Innanzitutto perché tale dichiarazione influenza l'applicazione delle immagini ai bordi con border-image; secondariamente perché così facendo offriamo un'alternativa per i browser che non supportano la proprietà: chi usa IE, quindi, vedrà intorno al box con id border un bordo solido e nero dello spessore di 27px su tutti e quattro i lati.

Osserviamo ora in che modo si definisce border-image. La dichiarazione di divide in tre parti.

La prima parte contiene l'URI dell'immagine da usare per i quattro bordi. Nell'esempio abbiamo usato, prendendola a prestito dal sito CSS3.info, questa immagine PNG:

Figura 1 - Immagine di sfondo
screenshot

La seconda parte è composta da quattro valori numerici senza unità di misura (in alternativa si possono usare delle percentuali): 27 27 27 27. Si noti come il valore 27 corrisponda ai 27px definiti per la larghezza del bordo. Come vanno interpretati quei quattro 27?

Quando si usa un'immagine con border-image essa viene suddivisa in una griglia composta di nove sezioni. Quattro angoli (1, 3, 9, 7 in senso orario), quattro lati (2, 6, 8, 4, sempre in senso orario), una sezione centrale (5).

Figura 2 - Griglia
screenshot

Semplificando al massimo possiamo dire che, nell'ordine, i quattro 27 stabiliscono quali parti/aree dell'immagine usare sul box nelle posizioni 1, 3, 9, 7, ovvero i quattro angoli. Il primo 27 significa: "Usa per l'angolo superiore sinistro (1) la parte corrispondente dell'immagine alta 27px". Il secondo 27: "Usa per l'angolo superiore destro (3) la parte corrispondente dell'immagine larga 27px". Il terzo 27: "Usa per l'angolo inferiore destro (9) la parte corrispondente dell'immagine alta 27px". Il quarto 27: "Usa per l'angolo inferiore sinistro (7) la parte corrispondente dell'immagine larga 27px".

Complicato? Così è purtroppo il meccanismo proposto dal W3C. Ma andiamo avanti.

La terza parte della dichiarazione comprende due parole chiave: round round.

Il primo round definisce il comportamento dell'immagine sui lati superiore, inferiore e centrale, in senso orizzontale (sono le sezioni 2 5 e 8 della griglia). Il secondo round opera sulle sezioni 4, 5 e 6, in senso verticale. round significa che quella parte dell'immagine va ripetuta, un po' come avviene con gli sfondi quando usiamo repeat-x e repeat-y. Se si rivede l'esempio (box 1) dovrebbe risultare tutto più chiaro: si noti come il piccolo rombo giallo venga ripetuto sui quattro lati.

In alternativa a round, si può usare la parola chiave stretch, come abbiamo fatto nell'esempio con il box 2. Ecco il codice:

#border2 {
 width: 200px;
 padding: 10px;
 border: 27px solid black;
 -webkit-border-image: url(border.png) 27 27 27 27 stretch stretch;
 -moz-border-image: url(border.png) 27 27 27 27 stretch stretch;
 border-image: url(border.png) 27 27 27 27 stretch stretch;
}

La differenza tra round e stretch è evidente. Con stretch quella parte di immagine (per noi il piccolo rombo giallo) viene estesa (diremmo stirata) in larghezza o altezza fino a riempire lo spazio.

Prima di concludere una serie di link ad articoli di approfondimento da cui trarre spunto anche per applicazioni creative: