alexa  Menu

CSS ile Katmanlı kağıt tekniği

  02.09.2014 ,   1 yorum ,   7.755 kez okundu.

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 :

katmanlı kağıt

işte bu kadar 🙂

Uygulamayı buradan deneyebilirsiniz.

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

1 yorum yapılmış

    CSS 3 standart cihazlar için medya sorguları | Anar Samadov, kişisel blog sayfası...

    […] da değil birçok mobil cihaz kullanıcılarını düşünmek zorunda kalıyoruz. Haliyle CSS kodlarımıza çok dikkat etmemiz […]

    18.09.2014, 23:41:24

Bir Cevap Yazın


%d blogcu bunu beğendi: