CSS  »  Articoli  »  CSS 3 

Le nuove specifiche CSS3 definiscono nuove proprietà per gli sfondi e potenziano quelle esistenti. In questo primo articolo dedicato all'argomento, vedremo come sfruttare la possibilità di definire più immagini per gli sfondi grazie alla ridefinizione della proprietà background-image.

Immagini di sfondo multiple

I CSS2 prevedono che ad un elemento possa essere assegnata una sola immagine di sfondo. I CSS3, invece, abbattono questo limite, consentendo agli sviluppatori di avere immagini di sfondo multiple.

Ecco un esempio di codice che mostra come definire le immagini:

div { 
background-image: url(immagine1.png), url(immagine2.png) 
}

Come si vede, i valori relativi all'URL di ciascuna immagine vanno separati da una virgola.

La specifica chiarisce poi un fattore decisivo: le immagini di sfondo vengono visualizzate su livelli diversi. L'immagine definita per prima nella lista apparirà sul primo livello, la seconda su un livello posto dietro al primo, etc. Il meccanismo è simile a quello che regola la proprietà z-index. La cosa è rilevante, ad esempio, nel caso di immagini che vadano a sovrapporsi o nel caso si utilizzino texture.

Per esempio, in questa demo presentata sul sito di Dev.Opera, l'immagine del paesaggio è è stata definita come terza e ultima: se fosse stata definita come prima della lista avrebbe coperto le altre due.

Per un caso pratico, con esempio allegato, si può fare riferimento a questo nostro articolo.

Un ulteriore elemento da tenere in considerazione è il modo in cui le singole immagini usate come sfondo vanno definite rispetto ad altre proprietà come background-position, background-repeat, etc. Nel contesto del modulo, è quanto viene chiariro nella sezione Layering multiple background images.

Riprendiamo lo snippet di codice precedente e impostiamo, oltre all'URL delle immagini, anche il loro posizonamento e il comportamento rispetto alla ripetizione:

div { 
background-image: url(immagine1.png), url(immagine2.png) 
background-position: top left, 20% 80%;
background-repeat: no-repeat, no-repeat;
}

Non è complicato. Il primo valore per background-position (top left) definisce il posizionamento della prima immagine della lista (immagine1.png; il secondo valore (separato dal primo con una virgola), definisce il posizionamento della seconda immagine, e così via. Lo stesso vale per background-repeat. Attenzione sempre all'ordine dunque!

Esempi

Facciamo un esempio concreto: si supponga di dover creare un menu a tab con angoli arrotondati il cui colore di sfondo cambi al passaggio del mouse. Seguendo i CSS2, si dovrebbe avere una marcatura come la seguente:

<div id="navigation">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Articoli</span></a></li>
</ul>
</div>

Altri articoli

Altre guide

Altre newsletter