CSS3 Box-Shadow Özelliği ile Kutulara Gölge Verme

Box-Shadow Özelliği

Önceki konumuzda Text-Shadow özelliği ile metinlere gölge uygulama işlemi anlatılmıştır. Box-Shadow özelliği de aynı şekilde kullanılan ve kutulara gölge efekti uygulamayı sağlayan Css özelliğidir.

Tarayıcıların eski versiyonlarında -webkit- ve -moz- ön eklerini kullanmak gereklidir. (En alttaki örnek)

Yapmamız gereken şey gölgenin yatay ve dikey konumlarını belirtmektir. İsteğe bağlı olarak gölge rengi ve blur efekti de kullanabiliriz.

Aşağıda box-shadow özelliği ile ilgil farklı örnekler gösterilmiştir:
.kutu1 {
    box-shadow: 2px 2px;
}
Negatif değerler gölgenin sol veya üstte çıkmasını sağlar.
.kutu1 {
    box-shadow: -2px -2px;
}
Gölge rengi belirtilebilir:
.kutu1 {
    box-shadow: 2px 2px red;
}
Blur efekti kullanılarak gölgenin dağılma miktarı belirtilebilir:
.kutu1 {
    box-shadow: 2px 2px 5px red;
}
Birden fazla gölge uygulanarak farklı görünümler elde edilebilir, mesela kutunun her tarafına gölge uygulanabilir:
.kutu1 {
    box-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px red;
}
Eski tarayıcı versiyonlarında bu kodların çalışması için -webkit- ve -moz- ön ekleri de kullanılmalıdır:
.kutu1 {
    box-shadow: 2px 2px 5px red;
    -webkit-box-shadow: 2px 2px 5px red;
    -moz-box-shadow: 2px 2px 5px red;
}
 
Konu örnekleri kısmını da inceleyiniz.
css kutuya gölge verme, css ile kutulara gölge efekti uygulama, kutunun her tarafına gölge verme

KONU İLE İLGİLİ ÖRNEKLER

Gölge efekti uygulanmış, buton görünümlü link örneği Kendin Dene

Bu örnekte kullanılan transition özelliği ileriki konularımızda anlatılmıştır.

Css gölgelendirme örnekleri Kendin Dene

Box-shadow özelliği kullanarak farklı görünümler elde edebiliriz.

Css ile gölgelendirme örneği Kendin Dene

Bu örnekte div elemanına gölge verilmiş, ayrıca ::after seçicisi kullanılarak kutudan sonra da gölge efekti oluşması sağlanmıştır.

Css ile kutulara gölge uygulama örnekleri Kendin Dene


YORUMLAR




7216  kez okundu.

Online Kullanıcı Sayısı 622