
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ı.
1 2 3 4 5 6 7 |
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.
1 2 3 4 5 6 7 8 9 |
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)
1 2 3 4 5 6 7 8 9 |
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.
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.