disign.it | CSS: effetto fogli sovrapposti | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 4.530 visualizzazioni

CSS: effetto fogli sovrapposti

23/05/2012

Con i fogli stile è semplice creare un effetto fogli sovrapposti, utilizzando la proprietà box shadow (compatibile con i browser in grado di interpretare i css3)

Le prime righe dello stile impostano dimensioni, colore di sfondo e centratura del box, la proprietà box shadows imposta invece i tre livelli di effetto sovrapposizione fogli:

 

    width: 600px;
    height: 600px;
    margin: 0 auto;
    background: #eee;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.15), /* ombra del livello top */
        0 10px 0 -5px #eee, /* secondo livello */
        0 10px 1px -4px rgba(0,0,0,0.15), /*
ombra del secondo livello */
        0 20px 0 -10px #eee, /* terzo livello */
        0 20px 1px -9px rgba(0,0,0,0.15); /*
ombra del terzo livello */

← PHP: anteprima basata sul numero di parole Jquery noconflict →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

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