THB - Ücretsiz Hizmetler

kenarkivirma

CSS ile katmanın kenarlarını oval yapma

Bugün size vereceğim CSS ipucunda, CSS'nin nimetlerinden bir tanesini daha sizlere vereceğim. Biliyorsunuz ki Bir resmin kenarlarını oval yapıp uplaod ettikten sorna katmana eklemek bazen bizi yorabilir. Ancak bunu CSS ile yaptığımız iş daha kolay bir hal alıyor.

Gerekli Resim:



Şimdi gelelim bu resim kenarlarını ovalleştirmeye.

Öncelikle işlem için bir iki kavramı öğrenmeliyiz. Bunlar;
border-radius // tüm köşeleri aynı oranda ovalleştirmek için
border-bottom-right-radius // alt sağ köşeyi ovalleştirmek için
border-bottom-left-radius // alt sol köşeyi ovalleştirmek için
border-top-right-radius // üst sağ köşeyi ovalleştirmek için
border-top-left-radius // üst sol köşeyi ovalleştirmek için

Tüm komutlarda px, yüzde ve em değerleri kullanılabilir.

Biz bu işlemi div katmanına eklediğimiz bir resimde yapıyoruz.
Yani tüm uygulamalarda katman olarak CSS kodundakini aldık.

Örnek 1 (Tüm köşeleri ovalleştirilmiş): "25px"
 

CSS kodu:
#cssovallestirme {    
width:190px;    
height:300px;    
border-radius:25px; 
background:url(/cssovallestirme.png);    
} 



Örnek 2 (Sağ alt köşesi ovalleştirilmiş): "25px"
 

CSS kodu:
#cssovallestirmesagalt {    
width:190px;   height:300px;    
border-bottom-right-radius:25px; 
background:url(/cssovallestirme.png);   
} 



Örnek 3  (Sağ üst köşesi ovalleştirilmiş): "25px"
 
 

CSS kodu:
#cssovallestirmesagust {    
width:190px;   
height:300px;    
border-top-right-radius:25px; 
background:url(/cssovallestirme.png);   
} 



Örnek 4 (Sol alt köşesi ovalleştirilmiş): "25px"
 

CSS kodu:
#cssovallestirmesolalt {    
width:190px;    
height:300px;   
border-bottom-left-radius:25px; 
background:url(/cssovallestirme.png);    
} 



Örnek 5 (Sol üst köşesi ovalleştirilmiş): "25px"
 

CSS kodu:
#cssovallestirmesolust {    
width:190px;    
height:300px;    
border-top-left-radius:25px; 
background:url(/cssovallestirme.png);    
} 




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: arcaingilicekursu.tr.gg( arcasa630gmail.com ), 10.05.2014, 05:58 (UTC):
harika yaaa bu siteyi kendin yaptıysan ne gurur sana



Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Mesajınız:

Bugün 27 ziyaretçi (92 klik) sitemizi ziyaret etti.
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=