Sempre a proposito di bordi, un’altra interessante possibilità offerta da CSS3 consiste nel creare un bordo utilizzando un’immagine attraverso la nuova proprietà border-image. L’implementazione di questa proprietà, tuttavia, non è per niente intuitiva… anzi, richiede un po’ ragionamento e di attenzione.
Innanzitutto bisogna predisporre l’immagine da usare in modo opportuno. Contrariamente a quanto si potrebbe pensare, l’immagine non viene ripetuta lungo tutto il bordo fino a riempirlo, ma viene in qualche modo suddivisa con una sorta di griglia simile a quella che si usa per il gioco del tris.
Immaginiamo di partire da questa immagine
L’immagine, come detto, non viene usata complessivamente ma viene suddivisa con la griglia "del tris" in questo modo
Al box a cui andremo ad applicare il bordo verrà applicata una griglia simile. Gli elementi in posizione A verranno usati per creare gli angoli del bordo, mentre quelli in posizione B verranno usati per riempire i lati.
Detto questo, proviamo ad applicare questa immagine ad un div. Premetto che le dimensioni dell’immagine originale sono 60 x 60 px e ciascun"fiorellino" ha una dimensione di 20px.
Proviamo ad usare il codice che segue:
div {
width: 250px;
padding: 10px 20px;
border: 20px solid transparent;
border-image: url(bordoGirandole.png) 20 round stretch;
}Notate che abbiamo dovuto comunque applicare un bordo con la proprietà border. Tramite questa proprietà impostiamo la dimensione del bordo (20px) inoltre, se definiamo anche il colore e l’aspetto del bordo, questo verrà visualizzato da quei browser che non supportano il bordo creato con le immagini.
Il risultato che otteniamo con questo codice è quello della figura che segue
Per gli angoli abbiamo usato, specificando il valore 20, aree di 20px per 20px. Mentre sui lati superiore ed inferiore abbiamo ripetuto la porzione di immagine che resta (tolte le parti usate per gli angoli) tante volte quanto sono necessarie per riempire tutto il lato. Invece, sui lati destro e sinistro abbiamo stirato o "strecciato" la porzione di immagine restante dal taglio degli angoli in modo da riempire tutto il bordo necessario.
Questo avviene, rispettivamente, grazie ai valori round e strech che abbiamo specificato come ultimi parametri per la proprietà border-image.
Il valore round (che abbiamo utilizzato per i lato orizzontali) ripete la mattonella per coprire l’intera dimensione del lato; il valore stretch, invece, prende una sola mattonella e la adatta (strechandola) alla dimensione del lato. Naturalmente, se usiamo un solo valore viene applicato sia ai lati orizzontali che a quelli verticali.
Tenete presente che se volete differenziare i due tipi di bordo, come abbiamo fatto noi, le due proprietà vanno specificate con questo ordine:
- bordi orizzontali
- bordi verticali
Usare come bordo una cornice
Nell’esempio precedente abbiamo usato come immagine una composizione di "mattonelle" uguali. In realtà, possiamo usare anche una vera e propria cornice, come quella che si vede qui sotto
Si tratta di una immagine png con lo sfondo trasparente. La larghezza della cornice, nel suo punto massimo, cioè all’altezza della astronave sulla sinistra è di 40 px circa. Userò questa misura come misura del bordo.
Ecco il codice CSS:
div {
border: 40px solid blue;
width: 200px;
padding: 10px 10px;
border-image: url(corniceSpazio.png) 40 stretch;
}Il risultato è questo
Come potete vedere l’immagine viene stirata per adattarsi alle dimensioni del box. Naturalmente, se già conoscete la larghezza del box a cui applicate lo sfondo, sarà sufficiente creare la cornice della stessa larghezza in modo da evitare la necessità di adattare i lati.
I file per riprodurre quanto proposto nella lezione si trovano qui.
Utilizzo avanzato della proprietà border-image
Nei precedenti esempi abbiamo dato per scontato di voler prendere per i quattro angoli una porzione di immagine dalle dimensioni sempre uguali, infatti, abbiamo specificato un solo valore per le dimensioni dei ritagli. In pratica creando una griglia sull’immagine con le linee equidistanti.
In realtà, è possibile specificare quattro valori per il ritaglio che rappresentano nell’ordine:
- Altezza del ritaglio per il bordo superiore
- Larghezza del ritaglio per il bordo destro
- Altezza del ritaglio per il bordo inferiore
- Larghezza del ritaglio per il bordo sinistro
Per capire meglio, faremo una prova. Immaginiamo di voler usare, per costruire il bordo del nostro box, la figura che segue:
Si tratta di una immagine di 200px x 120px i cui rettangoli hanno le seguenti dimensioni
- Rettangolo arancio in alto a sinistra 50 x 20px
- Rettangolo rosso in alto a destra 30 x 20px
- Rettangolo giallo in basso a destra 30 x 10px
- Rettangolo verde in basso a sinistra 50 x 10px
Quello che vogliamo fare è usare questi rettangoli come angoli del nostro bordo. Questo significa che i valori per creare la griglia di ritaglio dovranno essere definiti come segue:
- Altezza del ritaglio per il bordo superiore: 20px;
- Larghezza del ritaglio per il bordo destro: 30px;
- Altezza del ritaglio per il bordo inferiore: 10px;
- Larghezza del ritaglio per il bordo sinistro: 50px;
il che tradotto in una regola di stile si esprime così:
border-image:url(bordoAsimmetrico.png) 20 30 10 50 stretch;notate che per i lati abbiamo usato il valore stretch ma, essendo la parte di immagine usata un semplice colore piatto, qualsiasi valore si usa, il risultato finale non cambia molto.
Se volessimo scrivere una regola di stile completa, la potremmo definire come segue
div {
border: 40px solid blue;
width: 220px;
text-align: justify;
padding: 10px 10px;
border-image: url(bordoAsimmetrico.png) 20 30 10 50 stretch;
}Questa regola, produrrebbe sull’immagine la griglia che vedete nella figura qui sotto:
Con questa regola di stile, otterremo il bordo che vedete nella figura seguente:
Notate che i quattro angoli sono uguali. Questo avviene perchè abbiamo applicato un bordo di 40 pixel su tutti i lati. Le porzioni di immagine ritagliate per gli angoli vengono stirate per adattarsi allo spazio che devono coprire.
I file per riprodurre gli ultimi esempi proposti nella lezione si trovano qui.
