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.
13635 kez okundu.