Yuvarlak kenarlı kutular(border-radius) oluşturmak

Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak.  IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.

border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.

Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi.

Yapısı : <border-radius>{1,4} [ / <border-radius>{1,4}]?
Aldığı Değerler : [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]? 
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır
Kalıtsallık: Yok

Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.
İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.
Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.
Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye uygulanır.

Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 da gelecek) 
Firefox 2+
Safari 3+ (kısmen)
Opera 10.50+
W3C’s CSS Level 3+
CSS Profile 3.0

- Safari yüzde değerleri desteklemiyor.
- Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı kabul ediyor.
- Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor. Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız. Elips şeklinde sonuçlar elde etmke için (/) ayracı kullanılır.

	-webkit-border-radius:  40px 10px;
	-moz-border-radius:  40px/10px;
	border-radius:  40px/10px;

Uygulama

Bugünkü durumda border-radius tanımı tek bir tanımlama olarak atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome) için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri kullanılmaktadır. 

Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. 

İlk örneğimizi yapalım

div#kutu {
    width: 400px;
    padding: 20px;
    border-radius: 10px; /* Standart */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari ve Chrome */
    background: #F00;
    margin-bottom: 10px;
}

Örneği görmek için tıklayınız.

İkinci örnek

div#kutu{
    width: 400px;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    background: #F00;
    white-space:pre
 }

Örneği görmek için tıklayınız.

http://muddledramblings.com/table-of-css3-border-radius-compliance  ve http://shapeshed.com/examples/border-radius/ adresindeki örnekler inceleyerek bu özellik ile neler yapabileceğimizi görebiliriz.

İnternet Explorer Desteği

Yukarıda anlattığımız tanımları maalesef İnternet Explorer desteklememektedir, daha ön görünümü yayınlanan ie9′da desteklediğini açıkladı.

İnternet explorer için çözüm üreten bir çok javascript kodu mevcut, ben burada sizlere belli başlılarının linklerini vereceğim ve ufak bilgiler vereceğim.

DD roundies

Bu script güzel çalışıyor. Bir çok farklı durumlar için güzel bir çözüm üretiyor. Herhangi bir javascript kütüphanesine ihtiyacı yoktur. CSS3 border-radius özelliğini destekleyenler için bu özelliği desteklemeyenler için ise javascript kodunu ekleyerek bize güzel bir çözüm üretir. Köşe yumuşatması güzel

Curvy Corners ve jQuery Plugin Curvy Corners

Diğer güzel çözüm önerilerinden ikiside bu scriptlerdir. Köşe yumuşatması güzel. Background resimleri ile iyi çalışıyor, ancak CSS3 ile olan uygulamalarda sorun çıkarıyor. CSS3 border-radius destekleyen tarayıcı kontrolü yapmıyorlar ve fazladan yüklenmeye neden oluyorlar.

Nifty Corners ve jquery Corner

Köşe yumuşatması güzel değil. Yuvarlak kenar için üretilen kodda gereksiz bir çok eleman var. Pek önerilebilecek bir çözüm değil.

HTML Remix

Bu çözümün en güzel yanı yuvarlak kenar için ekstra kod yazmaya gerek olmaması. Yazdığımız border-radius değerini alıp desteklemeyen tarayıcılara göre kod yazıyor. Script tanımını css kodu içerisinden yapıyoruz.

.curved {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
}

Köşe yumuşatması güzeldir. 4.8 kb’lık dosya boyutu ile çok cazip boyuta sahip.

css3pie

CSS 3′ü desteklemeyen tarayıcılar için komple bir çözüm üreten bu script İnternet Explorer için üretilen çözümlerden birisidir. Tek sorunu bütünleşik bir çözüm sunduğu için dosya boyutunun biraz büyük olmasıdır. Köşe yumuşaklığı güzel. CSS3′ü destekleyen tarayıcılar için css kodunu desteklemeyen tarayıcılar için ise script kodunu uyguluyor olması güzel.

Sonuç

border-radius tanımını destekleyen tarayıcılar açısından bir sorunumuz yoktur. Sorunumuz desteği sağlamayan ie ile dir. 

Javascript ile ürettiğimiz çözümler normal tanımın yerini tutmayacaktır hiç bir zaman. Sayfa içerisinden bir çok elemana yuvarlak kenar uygulandığında ie için üretilen çözüm sayfanın fazladan yavaşlamasına neden olacaktır. 

Bir elemana yuvarlak kenar ve gölge uygulandığında ie için üretilen bir çok çözümde bazı sorunlar ile karşılaşılabilir. Bu gibi durumlarda resim ile çözüm üretmeniz tavsiye olunur. 

İE için üretilen çözümler için yukarıda yazdıklarım kendi gördüklerim ve internette araştırıp gördüklerim bilgilerden derlemedir. Bu değerlendirmelere sizin kendi uygulamalarınızdaki sonuçlarıda ekleyerek bir scripti seçmenizi öneririm. 

Bence en güzeli eğer tercih imkanınız varsa destekleyen tarayıcılar için kodu yazmak desteklemeyenler için olduğu gibi bırakmak(twitter.com sitesinde olduğu gibi.)

Kaynaklar

• http://webdesignernotebook.com/css/an-ode-to-border-radius/
• http://leaverou.me/2009/02/css3-border-radius-today/
• http://www.the-art-of-web.com/css/border-radius/ (border-radius)
• http://www.css3.info/preview/rounded-border/
• http://24ways.org/2006/rounded-corner-boxes-the-css3-way
• http://www.css3.info/border-radius-apple-vs-mozilla/
• http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
• http://www.smileycat.com/miaow/archives/000044.php (tüm makalelerin listesi)
• http://www.netzgesta.de/corner/ (javascript)
• http://www.curvycorners.net/demos/ (javascript)
• http://www.html.it/articoli/niftycube/index.html (javascript)
• http://www.dillerdesign.com/experiment/DD_roundies/#animation (javascript)
• http://www.w3.org/TR/css3-background/#border-radius
• http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser (javascript)
• http://doctype.com/having-trouble-styling-cross-browser-buttons-input-submit (sorunlar)
• http://muddledramblings.com/table-of-css3-border-radius-compliance (taraycı destek tablosu)
• http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8