Scritto da Abx in CSS, Tutorial

Tutorial CSS3: creare bordi con le immagini (border image)

ScarsoPoco interessanteSufficienteBuonoDa non perdere! (3 votes, average: 5,00 out of 5)
Loading ... Loading ...

css3 border imageContinua la nostra vetrina sulle nuove regole del W3C riguardanti i fogli di stile. Una delle nuove attesissime funzionalità previste dalle direttive CSS3 riguarda la possibilità di utilizzare delle immagini per creare bordi degli oggetti in modo più stiloso. Lo scopo di questa funzionalità è quello di poter utilizzare un’immagine quale bordo di un oggetto, con la possibilità di applicarle alcuni semplici e comuni effetti grafici.

Questa direttiva è ancora in piena fase di studio, per cui ci limiteremo ad esaminare l’implementazione abbozzata dagli unici browser che dispongono di un’anteprima di questa feature. Questi browser sono quelli che si appoggiano sul motore open-source WebKit, vale a dire Chrome e Safari, con la proprietà -webkit-border-image. Per Firefox bisognerà aspettare il rilascio della versione 3.1, attualmente disponibile in beta, che renderà finalmente disponibile la sua proprietà -moz-border-image.

La sintassi del comando è la seguente:

border-image: border-image-source border-image-slices border-image-repeat

Ecco nel dettaglio le proprietà.
border-image-source specifica l’immagine da utilizzare.

border-image-slices riceve fino a quattro valori numerici (in pixel o in percentuale, segue le solite regole dei CSS) che permettono di ritagliare in quattro sezioni l’area dell’immagine, ricavandone nove aree: quattro angoli, quattro lati ed un’area centrale.

La definizione seguente quindi

border-image: url(...) 10 30 25 15;

verrà applicata all’immagine ricavando le aree come descritto nell’immagine seguente
Border-image-slice, aree e dimensioni

Si vengono a creare così delle aree rappresentate dalle proprietà seguenti, che sono impostabili anche singolarmente:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image-repeat infine riceve come opzione stretch, repeat o round. Praticamente indica come  l’immagine deve adattarsi al contenitore.

Esempio: border-image round Ecco un esempio d’uso dell’opzione round. Il piccolo logo (21px di lato) viene ripetuto per creare il bordo.

Questa è la classe applicata al div dell’esempio. É stata utilizzata la modalità “compatta” per dichiarare dimensione e tipo di bordo.

.round{
border-width: 20;
-webkit-border-image: url(button.png) 20 round;
}

Esempio: border-image stretch Questo invece è un esempio ottenuto utilizzando image-repeat stretch.
L’immagine originale è di 16px di larghezza e 30px di altezza, ma viene stirata fino ad occupare l’intero contenitore; 5px vengono utilizzati per creare il bordo.

.stretch{
border-width: 5;
-webkit-border-image: url(button.png) 5 stretch;
}

Gli esempi sono ricavati con browser Safari 4beta per Windows.

Vedi anche:

Tag articolo
Commenti

Sottoscrivi senza commentare

Annunci
Social
I Blog del Network
Doki Cucina Doki iTech Doki Woman Doki Fun Image Map
Creative Commons License