Background multipli CSS3: foto sovrapposte con CSS background in HTML

5 minuti creativi: trasforma le tue foto a colori in foto in Bianco e Nero con Photoshop

9 Dicembre 2014

Online il nuovo sito internet di C. Sgubbi Italiana

19 Febbraio 2015

12 Gennaio 2015

Categorie

Background multipli con i CSS

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…

I CSS3 hanno portato novità nella gestione dei background

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à.

Come inserire background multipli con i CSS3

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;
}

Esempi

Decorazione di un contenitore di testo

Background Multipli con i CSS3: Trasformazione di un contenitore di testo con un effetto "lavagna" decorata

Background Multipli: Esempio 1

Creiamo un effetto “lavagna” modificando l’aspetto del div “container” con l’aggiunta di:

uno sfondo (l’ultimo nella lista dei background) ripetuto (url(img/blackboard-bg.png) top left repeat)
due decorazioni (img/blackboard-deco.png) posizionate, rispettivamente, in cima (center 20px) ed in fondo (center bottom 20px) al contenitore e non ripetute (url(img/blackboard-bg.png) top left repeat)

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;
}

Trasformazione di foto in “cartoline” appese

Background Multipli con i CSS3: Foto trasformate in cartoline appese

Background Multipli: esempio 2

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:

Creiamo il “bordo” intorno all’immagine utilizzando:
1. padding: 50px
2. il background di livello più “basso”, ovvero l’ultimo della lista (#FFF): questo serve a creare un bordo bianco intorno ad ogni immagine che utilizza la classe post (notare che il background-color del body è stato volutamente impostato a #CCC per evidenziare il #FFF usato come sfondo delle foto)
Aggiungiamo le “puntine” per far sembrare “appese” le foto con l’istruzione background (url(img/pin.png) right 10px top no-repeat, url(img/pin.png) left top no-repeat).
In entrambi i casi è stata usata un’immagine (img/pin.png) che non deve essere ripetuta (no-repeat) e che viene posizionata, in un caso in alto (top) ma spostata di 10px rispetto al margine DX (right 10px) mentre nell’altro caso viene posizionata in alto a SX (left top)

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.