THT DUYURU

chat
ugursuz reklam
takipci
Seçenekler

CSS ile Kenar Yumuşatma ve Gölgelendirme

Komega - ait Kullanıcı Resmi (Avatar)
Yardımsever
Üyelik tarihi:
07/2013
Nereden:
Dünydn .s
Mesajlar:
9.713
Konular:
1347
Teşekkür (Etti):
832
Teşekkür (Aldı):
2438
Ticaret:
(0) %
0
1731
27-08-2014 21:57
#1


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.
---------------------

- The End.

- Emekli Uzman Moderatör.



Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler