CSS ile gölge oluşturmak için box-shadow özelliğini kullanabilirsiniz. Bu özellik, bir öğenin gölge efektini belirlemenizi sağlar. box-shadow özelliği genellikle aşağıdaki gibi kullanılır:
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
Bu örnekte, box-shadow özelliği şu parametreleri içerir:
- Horizontal Offset (yatay ofset): 5px
- Vertical Offset (dikey ofset): 5px
- Blur Radius (bulanıklık yarıçapı): 10px
- Color (renk): rgba(0, 0, 0, 0.5) (siyah renginde ve %50 şeffaflıkta)
Bu, öğenin sağa 5 piksel, aşağıya 5 piksel ofsetli, 10 piksel bulanıklık yarıçapına ve siyah renkte %50 şeffaflığa sahip bir gölge oluşturur.
İsterseniz, sadece yatay ofset ve dikey ofset değerlerini de belirleyebilirsiniz:
div {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
Bu örnekte, yatay ve dikey ofset değerleri sıfır olarak belirlenmiştir, bu da gölgenin öğenin etrafında düzgün bir şekilde yayılmasını sağlar.
box-shadow özelliği ile oynayarak, gölge efektini ve sayfa tasarımınızın görünümünü özelleştirebilirsiniz.