disign.it | CSS3, uso di immagini di background multiple | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.410 visualizzazioni

CSS3, uso di immagini di background multiple

10/11/2011

La nuova proprietà dei CSS3 che permette l'utilizzo di più immagini come sfondo degli elementi ci consente di poter giocare sui nostri layout con una grande elasticità, proponendo effetti di movimento anche per quanto riguarda gli sfondi, pur mantenendo comunque una linea grafica costante in ogni pagina.
L'esempio che propongo è molto semplice: attraverso l'utilizzo di due immagini di sfondo, una foto sottacqua e l'illustrazione di un pesce, nelle tre pagine semplicemente modifico la posizione del pesce per significare un effetto di spostamento all'interno dell'ambiente prescelto.
La sintassi utilizzata è la forma sintetica
        background: url(pescetto.png) left bottom no-repeat, url(underwater.jpg) left top no-repeat;
ad ogni immagine seguono le regole, ed ogni immagine è separata dalla successiva con la virgola.
La sintassi estesa avrebbe invece previsto
    background-image: url(pescetto.png), url(underwater.jpg);
    background-position: left bottom, left top;
    background-repeat: no-repeat, no-repeat;

Ecco l'esempio (con visualizza codice/html del browser potete vedere il foglio stile interno)!

← PHP: manipolare le stringhe PHP, verificare la presenza e la versione delle librerie GD sul server →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.