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);    
}