CSS ile Kenar Yumuşatma ve Gölgelendirme

04 Ağu 2010 Çar 1 yorum

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.

11554 kez okundu.

1 Yorum Var

  1. Fatih Sinan Kara demiş ki

    Internet Explorer tarayıcısında gölgelendirme ve oval kenarlıklar gözükmüyor. Tarayıcının acizliği olsa gere :)

    • Ahmet Soyarslan demiş ki

      Internet Explorer 9 kenar yumuşatmayı destekliyor, eski sürümlerde yok maalesef.



Yorum Yazın