Fino ad oggi non sarebbe stato possibile usare solo codice css per ottenere quanto mostrato nella seguente figura.
Per sopperire a questa mancanza, il w3c ha introdotto la proprietà border-image. Attraverso border-image è possibile assegnare delle immagini ai quattro bordi di un elemento (ricordiamo che i bordi sono inizialmente nascosti. Quindi, per poter usare la proprietà border-image è necessario innanzitutto assegnare stile e dimensioni ai bordi, usando le proprietà border-style, border-width o border).
La proprietà border-image in realtà è un modo veloce per settare diverse distinte proprietà previste dal w3c per la gestione delle immagini sui bordi di un box. In particolare border-image racchiude, in ordine, le seguenti proprietà:
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
Per poter usare la proprietà border-image è necessario comprendere come il w3c pretende che venga creata e poi usata l’immagine che abbiamo intenzione di usare come sfondo nei bordi. Osservando la figura iniziale ci verrebbe da pensare che ci servono 3 immagini:
- un rombo rosso
- un rombo giallo basso e largo
- un rombo giallo alto e stretto
Ma non è così.
Il w3c ragiona a “slice”. Abbiamo bisogno di un’unica immagine che contenga tutte le immagini che ci servono. Sarà poi il browser, opportunamente istruito dal codice CSS, ad occuparsi del ritaglio dell’immagine e dell’inserimento dei vari ritagli nei bordi e negli angoli del box.
Ma come fa il browser a ritagliare l’immagine?
Ammettiamo di avere un’immagine di dimensione 300x170px, come quella qui di seguito mostrata (in questo caso l’immagine è volutamente monocolore. Una volta compreso come bisogna trattare l’immagine, procederemo con l’uso di un’immagine reale).
Il browser effettua il ritaglio dell’immagine tracciando 4 linee immaginarie: 2 orizzontali e 2 verticali.
La prima linea è orizzontale e viene tracciata in base alla distanza dal margine superiore dell’immagine, ad esempio 50px (questo valore dovremo comunicarlo nel codice CSS). In questo caso il browser traccerebbe la seguente (immaginaria) linea.
La seconda linea invece è verticale e viene tracciata in base alla distanza dal margine destro dell’immagine, ad esempio 80px (anche questo valore dovremo comunicarlo nel codice CSS).
La terza linea è orizzontale e viene tracciata in base alla distanza dal margine inferiore dell’immagine, ad esempio 20px (come sopra, dovremo indicare questo valore nel codice).
Infine l’ultima linea, la quarta, è verticale e viene tracciata in base alla distanza dal margine sinistro dell’immagine, ad esempio 100px (anche in questo caso dovrà essere indicato nel codice).
Così facendo il browser è in grado di dividere la nostra immagine in 9 celle. Adesso dovrebbe essere intuitivo comprendere quale pezzo dell’immagine verrà usato per l’angolo superiore sinistro del nostro box, quale sul bordo superiore e così via (il giro è sempre quello: dall’alto in basso, da sinistra a destra). In particolare, la parte dell’immagine contenuta nella cella in alto a sinistra verrà usata come immagine per l’angolo superiore sinistro del box. La parte dell’immagine contenuta nella cella centrale in alto verrà usata come immagine per il bordo superiore e così via. La parte dell’immagine contenuta nella cella centrale non verrà usata.
Ora, come facciamo a comunicare tutto ciò al browser? Banalmente così:
border-image:url("immagine.png") 50 80 70 100 stretch stretch;
Il significato dei numeri 50 80 70 e 100 dovrebbe ora esserci chiaro!
Per comunicare al browser come disegnare le linee virtuali possiamo usare, oltre ai pixel, anche una percentuale. Ad esempio:
border-image:url("immagine.png") 30% 40% 25% 33% stretch stretch;
Bene.
Ora non resta che comprendere l’ultima parte del codice: stretch stretch.
Questi due valori servono per comunicare al browser come deve trattare le immagini sui due bordi orizzontali e sui due verticali. In particolare il primo valore vale per i 2 bordi orizzontali (superiore e inferiore), mentre il secondo valore vale per quelli verticali (sinistro e destro). Se il secondo valore viene omesso, si assume che sia uguale al primo. I valori hanno i seguenti significati:
stretch
Il browser deve allungare l’immagine fino a riempire tutto lo spazio.
repeat
Il browser deve ripetere l’immagine tutte le volte necessarie a riempire lo spazio.
round
L’immagine è ripetuta tutte le volte necessarie a riempire lo spazio. Se però non si riesce a riempire lo spazio ripetendo l’immagine un numero intero di volte, allora l’immagine viene riscalata in modo che lo faccia.
space
L’immagine è ripetuta tutte le volte necessarie a riempire lo spazio. Se però non si riesce a riempire lo spazio ripetendo l’immagine un numero intero di volte, lo spazio che resta viene distribuito tra le varie ripetizioni dell’immagine.
Per verificare quanto qui imparato, possiamo rifarci ad uno dei migliori editor HTML online.
Ovviamente, ad oggi, nessuna versione di IE “capisce” la proprietà border-image. Inoltre per farla “capire” a Firefox bisogna scrivere codice alternativo (anteponendo “-moz-” alla proprietà che quindi diventa -moz-border-image). Insomma, se vogliamo fare le prove nel link all’editor sopra riportato è opportuno usare Chrome!