CSS ile Kenar Yumuşatma ve Gölgelendirme

Web sayfanızdaki öğelere çeşitli özellikler vererek daha güzel hale getirebilirsiniz.

Yeni CSS3 stil modeliyle gelen kenar yumuşatma efektini Internet Explorer 9, Opera, Firefox, Safari ve Chrome tarayıcılarında, gölge efektinii ise Firefox tarayıcısında görmek mümkün. Internet Explorer 9 Beta'dan önceki sürümlerde (6, 7 ve 8) bu efektlerin çalışmadığını belirteyim.

Kenar Yumuşatma:

CSS stil dosyanızda veya stil dosyası kullanmıyorsanız HTML dosyanız içerisindeki stil bölümünde kenar yumuşatma uygulayacağınız öğenin özelliklerine şu iki satırı ekleyin.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 border-radius: 5px 5px 5px 5px;

Böylelikle öğenin tüm kenarları 5 piksel yumuşatılacak. Eğer sadece belirle kenarları yumuşatmak istiyorsanız;

    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
     border-radius-topright: 3px;
     border-radius-bottomright: 3px;

şeklinde kullanabilirsiniz. Burada sağ üst ve sağ alt kenarlar yumuşatılacak. (Örnek olarak sitemdeki anket çubuklarına bakabilirsiniz.)

Gölgelendirme:

Sitenizdeki öğelere gölge vermek için öğenin stiline şu özelliği ekleyin.

    -moz-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.1);

veya

    -moz-box-shadow:1px 1px 1px #000000;

Böylece 1 piksellik bir gölge vermiş olacaksınız.