Hoşgeldin Ziyaretçi



Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS 3 ile resimsiz oval köşeler
#1
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;
PHP Kod:
Kod:
-moz-border-radius 


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


Bunlar pixel cinsinden değerler alırlar. Örnek:
PHP Kod:
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:
PHP Kod:
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:
PHP Kod:
Kod:
- top : Üst
- bottom : Alt
- left : Sol
- right : Sağ 


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


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 5 Ziyaretçi


10tl.net Destek Forumu -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping