Background Multipli: Esempio 1
Conosci la gestione dei background con i CSS ma non hai ancora approfondito le potenzialità dei CSS3 in tema di gestione di background multipli?
Sai che adesso è possibile utilizzare background multipli e sovrapporre immagini in una pagina HTML, ma non padroneggi questa tecnica? Allora questo articolo fa al caso tuo! Iniziamo…
La specifica dei CSS2, a meno di non “giocare” con gli pseudo-elementi “:after” e “:before”, consentiva di inserire un unica immagine di background per ogni singolo elemento HTML.
Questa limitazione ha costretto qualche volta i designer ad arrangiarsi di fronte a layout graficamente complessi ma i CSS3 hanno finalmente fornito nuove possibilità al servizio della creatività.
Tutte le proprietà che hanno a che fare con i background, a partire, ad esempio, dalla proprietà “background-image“, prevedono oggi la possibilità di specificare più valori separati da virgola.
Tutti i background specificati verranno inseriti in livelli sovrapposti ed il primo della lista sarà quello più “vicino” all’utente (quello in primo piano, in sostanza). I livelli rimangono ovviamente trasparenti, quindi diventa facile sovrapporre immagini di background diverse.
Di seguito un esempio in cui vengono inserite due immagini di background che successivamente vengono posizionate tramite la proprietà “background-position”. Da notare che in entrambi i casi sono presenti due valori separati da virgola: il primo valore specificato nella proprietà background-position si riferisce al primo background specificato; alla proprietà “background-size”, invece, è stato associato un solo valore: questo significa che quel valore verrà applicato a tutti i background del selettore corrente.
div { background-image: url(xyz.jpg), url(abc.jpg); background-position: left top, right bottom; background-size: auto; }
Creiamo un effetto “lavagna” modificando l’aspetto del div “container” con l’aggiunta di:
Le altre istruzioni servono soltanto a personalizzare il font utilizzato: per questo esempio ne ho scelto uno che ridorda l’effetto di un gesso sulla lavagna ed ha uno stile che si adatta alle decorazioni.
Guarda la versione completa senza il codice CSS e con il codice CSS.
<body> <div id="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div> </body>
#container { width: 960px; margin: auto; box-shadow: 3px 3px 10px #888; background: url(img/blackboard-deco.png) center 20px no-repeat, url(img/blackboard-deco.png) center bottom 20px no-repeat, url(img/blackboard-bg.png) top left repeat; padding: 140px 50px; } #container p { font-family: 'Homemade Apple', cursive; font-size: 26px; color: #FFF; line-height: 2.5em; }
Trasformiamo semplici foto (elementi img senza contenitore) in “cartoline” che sembrano appese sfruttando delle “puntine” (pin): di seguito il codice HTML e CSS.
Ad eccezione dell’aggiunta di una leggera ombra (box-shadow: -2px 2px 10px #666) e di una rotazione (transform: rotate(-15deg)), tutte le altre modifiche sono state apportate sfruttando i background.
Ecco i semplici passi:
Si tratta di un semplice esempio, ma è da notare il fatto che non sono stati usati contenitori: gli effetti sono stati ottenuti tramite l’aggiunta di background multipli alle sole immagini.
Guarda la versione completa senza il codice CSS e con il codice CSS.
<body> <img src="img/l-1.jpg" alt="Test" class="post"> <img src="img/l-2.jpg" alt="Test" class="post"> <img src="img/l-3.jpg" alt="Test" class="post"> </body>
body {background-color: #CCC;} img.post { height: 200px; margin: 40px; box-shadow: -2px 2px 10px #666; transform: rotate(-15deg); background: url(img/pin.png) right 10px top no-repeat, url(img/pin.png) left top no-repeat, #FFF; background-size: 60px, 60px, auto; padding: 50px; }
Se non ti piace la simmetria e vuoi aggiungere un po’ di ‘disordine’ e rendere più realistico l’effetto, potresti semplicemente applicare rotazioni diverse alle varie immagini. Ti propongo, ad esempio, questa semplice aggiunta:
img.post:nth-of-type(1) {transform: rotate(-13deg);} -> applica una rotazione di 13 gradi (anziché 15) alla prima foto (ho utilizzato il selettore :nth-of-type, ovvero l’n-esimo elemento di un certo tipo)
img.post:nth-of-type(3) {transform: rotate(-17deg);} -> applica una rotazione di 17 gradi (anziché 15) alla terza foto (anche qui ho utilizzato il selettore :nth-of-type, ovvero l’n-esimo elemento di un certo tipo)
Le specifiche CSS3 hanno introdotto, oltre alla possibilità di creare background multipli, anche la possibilità di ridimensionare i background, una possibilità di cui si sentiva effettivamente la mancanza e che descriverò nel mio prossimo articolo.
“Questo è tutto, gente!” 😉
Ah… dimenticavo… aggiungi un commento, fammi una domanda e, se l’articolo ti è proprio piaciuto, una condivisione mi farebbe proprio piacere! 🙂