BLOG

Css3 - Box Shadow Kullanımı

Tayfun Erbilen ekledi. 18 Kasım 2012 Pazar

Bu dersimizde css3 ile birlikte gelen box-shadow özelliğinden ve değişik varyasyonlarda kullanımından bahsedeceğim.. Yararlı olması dileğiyle..



Örnek Kullanımı;

box-shadow: 3px 6px 9px 12px #ccc inset

Parametre Açıklamaları
- 3px => Soldan değeri
- 6px => Yukarıdan değeri
- 9px => Blur değeri
- 12px => Gölge yayılma değeri
- #ccc => Gölge renk değeri
- inset => Gölge tipi (içe doğru)

Örnek Kullanımı;



İçe Gölge Yapımı;



Farklı Varyasyonlarda Kullanımları;

Gözat

4 yorum

  1. Can D.18 Kasım 2012 23:03

    Güzel Anlatım olmuş eğitimine sağlık :) , hala ie 8 ve daha düşük sürümler kullananları düşünürsek , dipnot olarak ie desteği için "csspie" den bahsetmek çok lezzetli olur : )

    YanıtlaSil
    Yanıtlar
    1. ahmad18 Kasım 2012 23:15

      eheh doğru söylüyorsun ama artık sanmıyorum ie6,7 sürümlerine takıldıklarını kimsenin :)

      Sil
  2. Mert K.20 Kasım 2012 11:36

    Merhabalar Tayfun bey. Dersiniz gerçekten güzel ve anlaşılır olmuş teşekkürler. Sitenizi geçenlerde şans eseri buldum ve sürekli takip ediyorum. Sizden bir ricam var. Jquery ve css kullanarak bir linke tıkladığımızda sayfanın ortasında açılan (arka plan kararak) modalbox yapımı için bir video çekmeniz mümkünmüdür? Piyasada eklentiler mevcut ama ben eklenti kullanmadan nasıl yapıldığını öğrenmek istiyorum. Böyle bir video hazırlarsanız sevinirim.

    YanıtlaSil
    Yanıtlar
    1. ahmad20 Kasım 2012 11:41

      Yakın zamanda hazırlarım inşallah, teşekkürler.

      Sil

Kaydol: Kayıt Yorumları (Atom)

HAKKIMDA

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müzikle de uğraşan sıradan birisi..