CSS Gölge Oluşturma

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.