border-radius kullanarak istediğimiz her hangi bir etiketin köşelerine ovallik verebiliriz. Hatta istediği köşenin istediğimiz bir kenarına da ovallik değeri vererek eliptik nesneler oluşturmak mümkündür. border radius sıklıkla butonlarda kullanılmasına rağmen google+ hesaplarında dikkat etmişsinizdir. Resimlerin çerçevelerini ovalleştirmek içinde kullanılmıştır.
Öncelikle basit bir örnek;
|
1 2 3 4 5 6 7 8 9 10 |
#ornek1{ border-radius: 10px; background: #BADA55; } #ornek2 { border-radius: 10px; border: 3px solid #BADA55; } |
Güncel tarayıcılar sorunsuz olarak destekliyor fakat daha eski tarayıcılara da destek vermek istiyorsanız. -webkit- ve -moz- öneklerini de kullanmanız gerekecektir. Önekleri kullanırken belirtmek isterim. Öneki kullandıktan sonra doğal yazım şeklini yazın.(güncel tarayıcılarda hata oluşmaması için)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.yuvarla { /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; } |
Eğer bir nesnenin arkaplanı yada içinde resim varsa ovalleştirdiğimiz kısımlar ekranda görünmeyecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.kutu { border-radius: 12px; width: 250px; height: 250px; background: url(bg.jpg); } .resim{ border-radius: 50%; width:250px; height: 250px; } |
Eğer 4 köşeyi aynı oranda ovalleştirmek istiyorsak tek değer girmemiz yeterli, 2 ve 4 olacak şekilde değerler girmekte mümkün.
2li değer girdiğimizde top-left (üst-sol) ve bottom-right(alt-sağ) 1.sayı, top-right (üst-sağ) ve bottom-left (alt-sol) 2.sayı olacaktır.
4li değer girildiğinde saat yönünde top-left (üst-sol), top-right (üst-sağ), bottom-right(alt-sağ), bottom-left (alt-sol) şeklinde değerler alacaktır.
px türünden değer girildiği gibi % ve diğer ölçü birimlerinden değer de girmek mümkündür.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.yuvarla-bir { border-radius: 15px; } .yuvarla-iki { border-radius: 25px 5px; } .yuvarla-uc { border-radius: 10px 20px 30px 40px; } .yuvarla-dort { border-radius: 0px 50% 50% 50%; } .kutu{ margin:10px; float: left; width: 150px; height: 150px; border:#0287D0 10px solid; } |
Dairesel bir yuvarlamak yapmak yerine eliptik bir yuvarlama yapmak da mümkün. Yatay ve dikey değerlerin arasına “/” taksim değerini koyarak eliptik bir ovallik elde edebiliriz.
|
1 2 3 4 5 6 7 8 |
.yuvarla-bes { border-radius: 80px/40px; } .yuvarla-alti { border-radius: 20px/150px; } |
Her bir kenara ayrı ayrı ovallik vermek mümkün ama çok kullanışlı olmadığı için açıklama yapmadım. Tarayıcı desteği ve border radius ile ilgili daha fazla bilgi almak isterseniz. bu kaynaktan faydalanabilirisniz.
Kaynaklar
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
https://css-tricks.com/almanac/properties/b/border-radius
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
[…] CSS ile Etiketleri Ovalleştirme (Border Radius) […]