Fw

Wordpress Creative Developer

Maschere con HTML e CSS

  • Html Css
  • -

Di recente mi sono imbattuto nel sito di Herr Leder, dove allo scrolling della pagina, scorre un’immagine all’interno del logo.

Maschere con HTML e CSS

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)

Foto che scorre

Immagine che fa da maschera (dimensioni reali: 498×1100)

Immagine che fa da maschera
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

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

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *