Çoğu web tasarımcının heyecanla beklediği ve w3c konsorsiyumu tarafından geliştirilen css3, uygulamada konfor sağlayan bir çok yeni özellikler vaad ediyor. İşte bu vaadlerinden birisi de hiç bir imaj öğesi kullanmaksızın, oval köşeleri olan elemanları tek satır kod yazarak üretebilmek.

HTML ve CSS Kod Örneği

Örnek kodlamanın yaptığı aslında basit! Aşağıdaki resimde, bu kodların üreteceği grafiğin elemanlarını ayrıştırarak irdeleyelim.

Grafiksel Detay Ä°ncelemesi

Görüldüğü gibi kodların oluÅŸturacağı grafik, ortadaki bir içerik bloÄŸu ve bir çok çubuktan oluÅŸuyor aslında. Aralıklarını birleÅŸtirdiÄŸimizde tüm grafik yekpare bir hal alarak, köşeler oval bir görüntü sergiliyor ve kutu içine eklenecek içerik ne olursa olsun, otomatik olarak kendini boyutlandırabiliyor. Yani köşelerde hiç bir kayma ya da bozulma olmamaktadır. OvalliÄŸi veren alttaki ve üstteki sayfa elemanları da “css / margin” özelliÄŸi sayesinde paralel düzlemde konumlandırılmaktadır. “margin” özelliÄŸinin “left,right,top,bottom” öğelerinin ayarlanması ile örneÄŸin;

Grafiksel Örnek

şeklinde bir eleman üretmek de imkan dahilinde oluyor.

Yapılan css kodlamasındaki uzunluÄŸa göz yumulduÄŸunda esnek bir yöntem olarak karşımıza çıkmaktadır ancak en yukarıda biraz deÄŸindiÄŸimiz gibi css3′deki tek satır kod ile kullanımına bakarak esneklik yönünde bir karar verelim.

1. div_Eleman_A{border-radius : 10px;}
2. div_Eleman_B{border-top-left-radius : 10px;}

Bu kod, css3 için ön görülmüş oval köşeli kenarlıkları saÄŸlamaktadır. radius’un alacağı pixel türündeki açı deÄŸeri köşelerin hangi miktarda yuvarlak olacağını belirliyor ve elemanın dört köşesini de etkiliyor. Bir köşenin etkilenmesini istediÄŸimiz durumlarda kullanımı ise 2. satırdaki örnektedir.