Öneri ve Hata Raporu



Günün Sözü İnsan kafasında ne kurarsa, onu yaşar.

kategori CSS
oylama 3/5 yorum 0 yorum yazar Hakan Taşan tarih 28 Eylül 2013

CSS3'ün getirdiği yeni özelliklerden bir tanesi olan border-radius ile artık oval köşeler yapabileceğiz. Yani photoshop kullanmaya artık gerek kalmadı. Büyük ihtimalle bu özelliği eski tarayıcılar tanımayacaktor, o yüzden tarayıcınızın en son sürümünü kullanmanızda fayda var. Hangi tarayıcının hangi sürümü CSS3 ve border-radius destekliyor bu linkten öğrenebilirsiniz.

Chrome ve Safari için

-webkit-border-radius: 20px;

 

Mozilla Firefox için

-moz-border-radius: 20px;
 
Internet Explorer, Opera ve genel kullanım için
 
border-radius: 20px;
 
Üstteki kodlar bütün köşeleri 20 piksel oval hale getirecektir. Eğer CSS3 destekleyen tarayıcı kullanıyorsanız sadece genel kullanım (border-radius) işinizi görecektir. Ayrıca her tarayıcı için ayrı ayrı kod yazmak yerine tek bir kod ile bütün tarayıcılarda geçerli olacak kodu yazmak size dosya boyutundan kazanç sağlar. Şimdi örneklerle daha detaylı bilgiler verelim.
 
 
Örnek 1) Bütün köşeleri oval yapma
 
Örnek Kod
border-radius:20px;  
-webkit-border-radius: 20px;  
-moz-border-radius: 20px;  

 
Örnek 2) Sol üst köşeyi oval yapma
 
Örnek Kod
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px; 
 
 
Örnek 3) Sağ üst köşeyi oval yapma
 
Örnek Kod
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px; 
 
 
Örnek 4) Sol alt köşeyi oval yapma
 
Örnek Kod
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px; 
 
 
Örnek 5) Sağ alt köşeyi oval yapma
 
Örnek Kod
 
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;  
 
 
Örnek 6) Her köşeyi farklı pikselde oval yapma
 
Örnek Kod
border-radius:20px 50px 80px 110px;  
-webkit-border-radius:20px 50px 80px 110px;  
-moz-border-radius:20px 50px 80px 110px;  
 
  
Not: İlk piksel değeri sol üst köşe için, 2. değer sağ üst köşe için, 3. değer sağ alt köşe için, 4. değer sol alt köşeyi ayarlar.
paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış