Ç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.
