Nella stesura del modulo CSS3 Backgrounds (proprietà dei sfondi), i css3 danno la possibilità di impostare più immagine di sfondo allo stesso elemento e non una unica come al momento usato nelle specifiche della proprietà background in css2.
Le regole css per applicare sfondi multipli ad un elemento sono semplice.
Come per i css2, specifichiamo un url per le differenti immagini da utilizzare e la loro posizione, separando ogni uno da una virgola.
Un esempio di base delle regole css da applicare per impostare sfondi multipli in css3:
#sfondi_multipli{
background:url(sfondo1.jpg) no-repeat top right, url(sfondo2.jpg) repeat-x bottom;
}
Di seguito, la prova che ho fatto per ricreare un tipo banner usando 6 immagini applicati ad un elemento largo 400px, alto 150px e con un bordo grigio di 2px.
Ecco un immagine di preview del risultato ottenuto con Safari3.1:
: ucello.jpg posizionata a 30px del bordo sinistra e 0px del bordo superiore(valore top)
: lumaca.jpg posizionata a 0px del bordo destra (valore right) e 105px del bordo superiore
: logo.jpg posizionata a 60px del bordo sinistro e 55px del bordo superiore
: fiore.jpg posizionata a 5px del bordo sinistro e 55px del bordo superiore
: erba.jpg ripetuta orizzontalmente (repeat-x) lungo la parte inferiore dell’elemento (valore bottom)
: cielo.jpg ripetuta orizzontalmente (repeat-x) lungo la parte superiore dell’elemento (valore top)
Le regole css usate:
NB: l’ordine in quale viene scritto l’url alle immagini di sfondo è importante.
Il primo sfondo sarà quello che si troverà su un livello superiore agli altri.
Per questo esempio, l’ucello (la prima immagine di sfondo) si troverà sopra di tutto, mentre
il cielo (l’ultima immagine di sfondo) si troverà sotto tutte le altri.
Questo metodo ci permette di creare sfondi a più livelli in modo organizzato.
#sfondi_multipli{
width:400px;
height:150px;
border:2px solid #CCC;
background:
url(ucello.jpg) no-repeat 30px top,
url(lumaca.jpg) no-repeat right 105px,
url(logo.jpg) no-repeat 60px 55px,
url(fiore.jpg) no-repeat 5px 55px,
url(erba.jpg) repeat-x bottom,
url(cielo.jpg) repeat-x top;
}
Ecco un immagine di preview del risultato ottenuto con Safari3.1:
Il risultato dal vivo:
NB: questa proprietà css3 è supportata solo da Safari in questo momento, con altri browser vedrete solo il bordo grigio.
{ 1 comment… read it below or add one }
Stupefacente, peccato che venga supportato sol da Safari