Bir site tasarımı yaparken başlangıç ayarı olarak gerek programlarda, gerekse de cssde oluşturduğunuz çerçeveler köşeli olacaktır. Bu köşeleri biraz törpüleyerek oval şekiller oluşturabilir nispeten daha özgün bir görünüm yakalabilirsiniz. Bu yazıda kolayca nasıl oval köşeler oluşturabileceğinizden bahsetmeye çalışacağım.

Yazıya başlamadan, daha önce yazdığım Köşe Düşmanı CSS Uygulamaları ve CSS ile Oval Köşeli Kutu Üreteci yazılarını da inceleyebileceğinizi hatırlatırım.

1. Uygulamanın en basit halini sanırım css ile gerçekleştiriyoruz. Oval köşe oluşturmak istediğiniz yeri;

<div style="border:1px solid #000000; padding:5px; -moz-border-radius:10px;">ilgili bolum</div>

şeklinde kodlarsanız oval köşeli bir kutucuk edinirsiniz.

Ayrıca yine css ve aynı zamanda imajlar kullanmak isterseniz Rounded corners in CSS başlıklı yazıyı inceleyebilirsiniz.

2. Google‘dan bu konuda yardım alarak da aynı işlemi gerçekleştirebilirsiniz. http://groups-beta.google.com/groups/roundedcorners?c=000000&bc=ccc&w=34&h=34&a=tr adresinde göreceğiniz üzere bir oval köşe mevcut. Bazı parametreleri değiştirerek bunu tasarımınıza uygun hale getirebilirsiniz. Adreste gördüğükleriniz;

c: Köşenin rengini ifade ediyor. Ben siyah yani #000000 kullandım. Siz hex kodlardan hareketle renklendirme işlemini yapabilirsiniz.
bc: Arka plan rengini ifade etmekte. Yine renklendirme işlemini yapabilirsiniz.
w: Width, yani genişliği ifade ediyor. Piksel olarak değerlendiriniz.
h: Height, yani yükseklik. Yine genişlik ile aynı değerlendiriniz.
a: Bu bölüm ise köşenin yönünü ifade ediyor. Örnekte gördüğünüz gibi tr yani top-right, yani sağ üst köşe. Diğer köşeler için sol üst tl, sağ alt br, sol alt bl.

3. Oval köşeleri javascript ile gerçekleştirmek de mümkün. Bunun için sanırım en çok kullanılan kaynak Nifty Corners. Ayrıca Phatfusion‘un da Rounded Corners isimli bir çalışması var.

4. Kod bilgisinden yoksun iseniz oval kutular oluşturmak için üreteçlerden yararlanabilirsiniz. Kullanabileceğiniz araçlar:

• RoundedCornr
• CornerShop
• Ajax Rounded Corners Generator
• CSS Rounded Box Generator

5. Birçok site yapımcısı Google AdSense‘ten gelir elde ediyor. AdSense haziron ayından beri oval köşeli reklam yayınına izin veriyor. Henüz fark etmemiş olanlar için küçük bir hatırlatma. Reklam kurulumunda ilgili ayarı gerçekleştirebilirsiniz.

6. Son olarak tasarımınıza uygun oval köşeli resimler kullanmak isterseniz de eburhan’ın şurada tanıttığı RoundPic aracını kullanabilirsiniz.