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:
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.
Box-shadow özelliği kullanarak farklı görünümler elde edebiliriz.
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.
12907 kez okundu.