CSS İle Radius (Oval) Kenarlar

Artık yavaş yavaş CSS 3 ve HTML 5'ten bahsetmeye başlamak gerek. Aslında bir çoğumuz web trendi gereği oval nesneler ve arayüzler görmeye bunları sayfalarımızda uygulamaya dolayısıyla CSS 3'de border-radius kullanımına başladık. Ancak bu konuyla ilgili ben tatmin edici türkçe bir kaynağa denk gelmedim. Bu makalemde CSS 3 ile gelen radius(ovallik verme) özelliğinin hangi browserlarda nasıl yorumlandığını anlatacağım.

Artık yavaş yavaş CSS 3 ve HTML 5'ten bahsetmeye başlamak gerek. Aslında bir çoğumuz web trendi gereği oval nesneler ve arayüzler görmeye bunları sayfalarımızda uygulamaya dolayısıyla CSS 3'de border-radius kullanımına başladık. Ancak bu konuyla ilgili ben tatmin edici türkçe bir kaynağa denk gelmedim. Bu makalemde CSS 3 ile gelen radius(ovallik verme) özelliğinin hangi browserlarda nasıl yorumlandığını anlatacağım.

Aşağıdaki resimde de görüldüğü üzere iki buton var bunlardan bir tanesi CSS 2.1 ile yapılan background'a image vererek yaptığımız klasik buton diğeri ise CSS 3 ile gelen radius ve gradient özellikleri ile yapılabilecek bir buton. Bu noktada bir parentez açayım. Gradient yani deglare özelliği CSS 3 ile gelen diğer özelliklerden biridir. Bunu da ilerleyen zamanlarda bir makaleyle ele alacağım.



Her browser'ın CSS ve HTML kodlarını kendine göre yorumlama şekli vardır. Bu yorumlama farkı browser'ları geliştiren firmaların kullandıkları layout engine olarak adlandırılan web içeriği görüntüleme teknolojilerinin farklılıklarından (framework farklılıklarından) kaynaklanmaktadır.

Bu framework'ler Safari ve Chrome'da Webkit, Firefox'ta Gecko, Opera'da Presto ve Internet Explorer tarayıcılarında Trident olarak karşımıza çıkar. Dolayısıyla UI'ların en çok sıkıntısını çektiği noktalardan biridir her browser'a uygun CSS kodu yazmak hem CSS dosyasını şişir hemde insana sırf iş keser. Her ne kadar IE 9 ile CSS 3 sıkıntıları daha da azalmışta olsa Microsoft'un CSS'i yorumlama tarafında özellikle IE 8, IE 7 ve IE 6'da ciddi sıkıntılar var. (Ben IE'yi CSS 3 için kasmamanızı öneririm. Tabi bu sitenizin hedef kitlesine göre değişir).

Radius temelde border-radius olarak tanımlanır. Form nesnelerine (buton,textbox, textarea, combo vb..) , division'lara ve hatta table'larınıza bile uygulayabilirsiniz. Şimdi gelin radius'u hangi browser'da nasıl kullanacağımıza bakalım.

Firefox border-radius kullanımı:

[*] -moz-border-radius: (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle { -moz-border-radius: 7px; }



[*] -moz-border-radius-topleft: (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] -moz-border-radius-topright: (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] -moz-border-radius-bottomright: (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] -moz-border-radius-bottomleft: (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle {

-moz-border-radius-topleft: 9px;

-moz-border-radius-topright: 7px;

-moz-border-radius-bottomright: 9px;

-moz-border-radius-bottomleft: 7px;

}



[*] -moz-border-radius: (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle { -moz-border-radius:10px 5px 10px 5px; }



Chrome ve Safari border-radius kullanımı:

[*] -webkit-border-radius: (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle { -webkit-border-radius: 7px; }



[*] -webkit-border-top-left-radius: (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] -webkit-border-top-right-radius: (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] -webkit-border-bottom-right-radius: (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] -webkit-border-bottom-left-radius: (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle {

-webkit-border-top-left-radius: 9px;

-webkit-border-top-right-radius: 7px;

-webkit-border-bottom-right-radius: 9px;

-webkit-border-bottom-left-radius: 7px;

}



[*] -webkit-border-radius: (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle { -webkit-border-radius:10px 5px 10px 5px; }



Opera ve Internet Explorer 9+ border-radius kullanımı:

[*] border-radius: (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle { border-radius: 7px; }



[*] border-top-left-radius: (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] border-top-right-radius: (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] border-bottom-right-radius: (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

[*] border-bottom-left-radius: (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle {

border-top-left-radius: 9px;

border-top-right-radius: 7px;

border-bottom-right-radius: 9px;

border-bottom-left-radius: 7px;

}



[*] border-radius: (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)


.xStyle { border-radius:10px 5px 10px 5px; }



Böylece Firefox, Chrome, Safari, Opera ve IE 9.0 browser'lar için istediğiniz gibi border-radius'u uygulayabilirsiniz. Eğer bu beni kesmedi tüm browser'lara uygulamam gerekiyor derseniz şu linkteki , şu linkteki ve şu linkteki makalelere bir gözatabilirsiniz.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

teşekkürler faydalı bilgiler.
-moz-border-radius: 6px; -webkit-border-radius: 6px; her ikisinde de çalışıyor. teşekkürler.
emmoğlu bir radius için bu kadar browser için kod yükledik diyelim sitemiz çok gereksiz bir kod yoğunluğu yaşamayacak mı? O PROBLEMİ NASIL HALLEDECEZ
aynen nasrullahkeskin e katılıyorum ben açıkcası bir gif yapmayı yeğlerim :)
paylaşım için teşekkürler kısa bir zaman önce bir iş mülakatında sorulan sorulardan biriside buydu radius kodunu tarayıcılarada fonksiyon olarak kullanmayı düşünüyorum kod yoğunluğu olmasından iyi olur diye düşünüyorum
arkadaşlar yorum yaptığınız koseleri oval olan tabloyu inceyelin. gif ile yapılmış yani hangi tarayıcıyla girersen gir aynı. css html5 tabiki güzel ama tarayıcı yorumlarının farklı olması özellikle ie hep baş ağrıtacaktır.

Yukarı Git