Forum'da ara:
Ara


Yazar Mesaj
Mesaj12.08.2011, 17:15 (UTC)    
Mesaj konusu: CSS 3 ile resimsiz oval köşeler

Merhaba arkadaşlar. CSS nimetleri her geçen gün tematik blog yazarlarını keşfetmeye zorluyor. Bu CSS nimetinin özelliğinden bahsetmek istiyorum. Bu yazıda belirteceğim kodlar ile bir çok özelliği hiç resim kullanmadan oval hale getirebileceğiz.

Uyarı : CSS 3 kullanarak oval köşeler yaparsak yalnızca şu tarayıcılarda düzgün olarak görünecektir.

Mozilla Firefox
Chrome
Safari


Bunu göze alarak yapmak istiyorsanız anlatıma başlayalım.

Firefox‘ta oval köşeler için aşağıdaki kodu kullanmamız gerekli
;
Kod:
-moz-border-radius

Google Chrome ve Safari için ise;
Kod:
-webkit-border-radius


Bunlar pixel cinsinden değerler alırlar. Örnek:
Kod:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Eğer isterseniz her köşe için ayrı değerler belirtebiliyoruz. 4 köşe için de ayrı ayrı kod kullanmak isterseniz:
Kod:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Yukarıdaki kodları çok az İngilizce biliyorsanız anlayabilirsiniz ama yinede Türkçe karşılıklarını verelim:
Kod:
- top : Üst
- bottom : Alt
- left : Sol
- right : Sağ

Örneğin sadece üst köşeleri yuvarlatmak istiyorsanız:
Kod:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;


webmaster siteleri bu anlatımı izin almadan kulllanabilirler
______________
@tr.gg dısı link yasak
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu