Css3 Katman Etkisi

CSS Notları
30 Mart 2012
829 OKUNMA
1 YORUM
Facebook
Twitter
Google +

Bu etkiyi elde etmek için daha önceleri bir görsel kullanmak kaçınılmazdı. Css3 güzellikleriyle bu işi görsele ihtiyaç duymadan yapabiliyoruz.

Html yapısında layer gövdesini oluşturuyoruz.

<div class="katmanlar"> Css3 Layer/Katman Etkisi </div>

Css kodları da açıklamalı olarak gösterilmiştir.

.katmanlar

{ background: #eee;
box-shadow: 0 1px 1px rgba(0,0,0,0.15), /* ilk katman gölgesi */
0 10px 0 -5px #eee, /* ikinci katman */
0 10px 1px -4px rgba(0,0,0,0.15), /* ikinci katman gölgesi */
0 20px 0 -10px #eee, /* üçüncü katman */
0 20px 1px -9px rgba(0,0,0,0.15); /* üçüncü katman gölgesi */ }

Son olarak ortaya çıkan görüntü şu şekilde olacaktır;

 

 

Facebook
Twitter
Google +

ÖNCEKİ YAZI

«

SONRAKİ YAZI

»

YORUMLAR

  1. Ayhan

    Çok başarılı olmuş hocam :)

Yorum yaparak bu yazıdaki tartışmaya katılın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*
*