Menü ve Reklam Alanı
Sayfayı Paylaş

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);    
} 
 
Bugün 10 ziyaretçi (51 klik) sitemizi ziyaret etti.

Copyright 2012. THB. Tüm hakları saklıdır. Tasarımlayan: Oğuzhan Acımaz.
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol