CSS’de Gölge Özellikleri

Resimlerinizi ziyaretçilerinize daha şık bir görünüm içinde sunmak için resimlerinize ufak bir gölge efekti verebilirsiniz. Bunun için CSS‘de “box-shadow” özelliğini kullanabilirsiniz. Belirlediğiniz renk ve boyutta resimlerinize gölge efekti vermenize yarayacaktır. Bu sayede siz yazılarınıza normal bir resim eklerken, CSS otomatik olarak o resme belirlenen boyut ve renkte gölge efekti verecektir. Ziyaretçilere hoş bir görünüm sunan bu özellik CSS ile ayarlandığından dolayı style dosyanızda az yer kaplayıp siteninizin hızını yavaşlatmamış olacaktır. Bu sayede siteniz eskisi gibi hızlı açılıp ve bunun yanında ziyaretçilerinize resimlerinizi daha hoş bir görünüm içinde sunmanızı sağlayacaktır. Resimlerinizin ilgi çekmesi, yazılarınızın da okunabilirlik oranını artıracaktır.

 

Bir resme normal olarak gölge efekti vermek için aşağıdaki kod dizilimine bakabilirsiniz.
CSS Kodumuz:

1
2
3
box-shadow: 0px 0px 10px #000000;   /* Standart */
-moz-box-shadow: 0px 0px 10px #000000;   /* Firefox */
-webkit-box-shadow: 0px 0px 10px #000000;   /* Safari ve Chrome */

Yorum yap

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir