Bu makalede, Box Shadow vs Filter Drop Shadow arasındaki farkları detaylandıracağız. Bunu örnekler ve görseller üzerinden gözlemleyerek sonuca varacağız.
CSS Box Shadow, bir HTML elementinin kenarlarına gölge eklemek için kullanılan bir CSS özelliğidir. Bu gölge, elementin kenarlarının etrafına yerleştirilir ve görünümünü derinleştirir.
Filter Drop Shadow, bir görüntü veya bir HTML elementi üzerinde gölge oluşturmak için kullanılan bir CSS filtresidir. Bu filtre, elementin içeriğine gölge ekler ve farklı görünümler oluşturabilir.
Temel fark, Box Shadow’un kenarlar etrafında bir gölge oluşturması ve elementin şeklini korurken, Filter Drop Shadow’un içeriğe gölge eklemesi ve elementin şeklini değiştirebilmesidir. Ayrıca, Filter Drop Shadow farklı renkler ve şeffaflık ayarları ile oynayarak daha fazla özelleştirme sağlar.
CSS Box Shadow örneği:
.box {
box-shadow: 10px 10px 5px grey;
}
Yukarıdaki kod, .box sınıfı olan bir HTML elementine bir gri gölge ekleyecektir. Gölge, elementin etrafına 10 piksel sağa ve 10 piksel aşağıya yerleştirilecektir ve 5 piksel yayılma boyutuna sahip olacaktır.
Filter Drop Shadow örneği:
.box {
filter: drop-shadow(10px 10px 5px grey);
}
Yukarıdaki kod, .box sınıfı olan bir HTML elementine bir gri gölge ekleyecektir. Gölge, elementin içeriğine yerleştirilecektir. 10 piksel sağa ve 10 piksel aşağıya ve 5 piksel yayılma boyutuna sahip olacaktır.
Ayrıca, Filter Drop Shadow ile renkler ve şeffaflık ayarları da yapılabilmektedir. Örneğin:
.box {
filter: drop-shadow(10px 10px 5px rgba(255, 0, 0, 0.5));
}
Yukarıdaki kod, .box sınıfı olan bir HTML elementine kırmızı bir yarı şeffaf gölge ekleyecektir. Gölge, elementin içeriğine yerleştirilecektir. 10 piksel sağa ve 10 piksel aşağıya ve 5 piksel yayılma boyutuna sahip olacaktır.
Yapılan işlemler sonucunda gölgeleme işlemi için aşağıdaki görselede bakabilirsiniz. Bu görsel, Box Shadow vs Filter Drop Shadow için güzel bir açıklama olacaktır. Örneğin;
Görsel’i incelediğinizde, box Shadow ile filter drop shadow’un arasındaki farkı görebilirsiniz. Etkili bir şekilde gölgelendirme vermek istediğinizde, kullanacağınız alan için seçimde bulunmanız gerekmektedir.
