Pazartesi , 16 Ocak 2017
Anasayfa » WEB » CSS » CSS ile Etiketleri Ovalleştirme (Border Radius)

CSS ile Etiketleri Ovalleştirme (Border Radius)

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;

border-radius

 

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)

Eğer bir nesnenin arkaplanı yada içinde resim varsa ovalleştirdiğimiz kısımlar ekranda görünmeyecektir.

border-radius-2

 

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.

border-radius-3

 

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.

Screenshot_1

 

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

 

Hakkında Hayri

İlginizi Çekebilir

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Wordpress Tema indir