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.
Kod:
-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;
Kod:
-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.
Kod:
-moz-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.1);veya
Kod:
-moz-box-shadow:1px 1px 1px #000000;Böylece 1 piksellik bir gölge vermiş olacaksınız.
