Css Box-Shadow | MinimalCoding

2 Haziran 2015

minimalcoding

1501 0

Css Box-Shadow ile kutulara gölge vermek

Box-shadow yapısını css3 gelmeden öncede bir kaç div ve pozisyon ayarı yaparak yada div için background görseli atayarak bu sorunu çözmek mümkündü. Artık günümüzde Css3 ile eklenecek bir kaç satır kod ile kutulara bu özelliği atamak son derece kolay ve kullanışlı.




box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

Kod yapısında da görüldüğü gibi box-shadow kullanımı text-shadow ile benzer yapıyı kullanmaktadır. text-shadow yapısı için tıklayınız…

Box Shadow yapısı da 4 kısımdan oluşmaktadır;

1. değer:

Yatay eksen de ki mesafe için kullanılır pozitif ve negatif değer alabilir. +5px, -5px gibi

2. değer:

Dikey eksen eksen de ki mesafe için kullanılır pozitif ve negatif değer alabilir. +5px, -5px gibi

3. değer:

Bulanıklık (blur) gölgemizin sert yada yumuşak olmasını ayarladığımız kısımdır 0 çok keskin bir görüntü iken 7px daha soft bir görüntü elde etmemizi sağlar.

4. değer:

Son değerimiz gölge rengi #000 kullanıla bildiği gibi rgba olarakta kullanım uygulaya biliriz rgba kullanımında ilk üç değer R-G-B son değer ise Opacity yani şeffaflığı ayarlamak çin kullanılır.

Tarayıcı Desteği

Tarayıcılar
Versiyon Desteği	10.0 4.0 -webkit-	5.1 3.1 -webkit-	9.0+	4.0 3.5 -moz-	10.5

Farklı tarayıcılar için farklı kod şablonları uygulamak gerekmektir.




box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

-webkit-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

Box-shadow inset (kutu içi gögle verme)




box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);

box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);

-moz-box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);

-webkit-box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);

Örnek Uygulama

See the Pen BNWBax by MinimalCoding (@MinimalCoding) on CodePen.