02.09.2014 ,
1 yorum ,
11.142 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 :
işte bu kadar 🙂
Uygulamayı buradan deneyebilirsiniz.
Kaynak: http://jameskoster.co.uk/snippets/layered-paper-effect-using-css3-box-shadows/
