CSS ile Katmanlı kağıt tekniği

Tasarımlarda rahatlıkla kullanılabilen katmanlı kağıt effektini sadece CSS ile nasıl yapılacağını paylaşmak istedim.

Öncelikle HTML sayfanızda aşağıdaki gibi bir div oluşturarak bir içerik girelim:

Bu bir deneme yazısıdır.
www.anarsamadov.net

Ardından yine CSS kodlarımızı girelim. İsterseniz yeni bir css doyası oluşturup HTML sayfanıza bağlayabilirsiniz. Ben burada kolay olsun diye direk HTMl sayfamıza gömülü css kodları kullanacağım:

.katmanli-kagit{
    text-align: center;
    padding:1.618em;
    margin-bottom:1.618em;
    font-weight: bold;
    margin:1em;

    background: #ededed;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.25), /* ilk katmana ait gölge */
        0 10px 0 -5px #ededed, /* ikinci katman */
        0 10px 1px -4px rgba(0,0,0,0.15), /* ikinci katmana ait gölge */
        0 20px 0 -10px #ededed, /* üçüncü katman*/
        0 20px 1px -9px rgba(0,0,0,0.15); /* üçüncü katmana ait gölge */
}

Sonuç olarak şöyle bir görüntü oluşması gerekiyor :

işte bu kadar 🙂

Uygulamayı buradan deneyebilirsiniz.

Kaynak: http://jameskoster.co.uk/snippets/layered-paper-effect-using-css3-box-shadows/