Maschere con HTML e CSS
Di recente mi sono imbattuto nel sito di Herr Leder, dove allo scrolling della pagina, scorre un’immagine all’interno del logo.
Oltre ad essere originale è anche semplice da ottenere. Vediamo come è stata realizzata.
Le immagini
Intanto è importante vedere come sono state costruite le due immagini, per ottenere l’effetto. Lo sfondo potrebbe essere anche uno sfondo con un colore.
Immagine che scorre (dimensioni reali: 498×1386)
Immagine che fa da maschera (dimensioni reali: 498×1100)
L’immagine è in formato PNG, in quanto il centro della maschera deve essere trasparente in modo da far vedere l’immagine che c’è sotto.
Codice HTML
Il codice HTML è fatto di tre div, messi uno dentro l’altro. Il primo che contiene l’immagine di sfondo, il secondo la foto che scorre e il terzo la maschera.
Tutte e tre le immagini vengono inserite come sfondo, tramite CSS.
Codice CSS
Ora vediamo il codice CSS necessario per ottenere l’effetto.
#image {
width: 300px;
height: 1400px;
margin: 0 auto;
position: relative;
background: #fff url(image.jpg) 0 165px no-repeat;
}
#mask {
width: 300px;
height: 100%;
background: transparent url(mask.png) top center no-repeat;
position:fixed;top:0px;
}L’immagine viene inserita come sfondo (#image), posizionata a 165px dall’alto, in modo che parta con l’inizio della maschera.
L’immagine che fa da maschera (#mask) è posizionata in modo fixed, per non farla scorrere durante lo scrolling della pagina.
Cosa ne pensi di questa tecnica? L’hai mai utilizzata?
1 commento
Stupendo template! Complementi Federico, la tua
app é fantastica! Ho letto dei
tuoi progetti, viaggi etc e,
davvero complimenti. In
bocca al lupo per tutto.
Nadia
http://beatlesplanet.it