CSS ile Yuvarlak Köşeler Oluşturmak

Web sitesi ya da tema tasarımı yaparken yuvarlak köşeler kullanmak bir tercih meselesi olabilir. Statik grafikler kullanarak bu işi halletmek daha kolay olsa da dinamik yani değişken boyutlu dikdörtgenler için de bu işi halletmenin bir yolu var. Hazır javascript kodlarını kullanarak yapabilir ya da şimdi anlatacağım şekilde CSS tabanlı olarak çözüme ulaşabiliriz.

Öncelikle kullanmak istediğimiz rengi seçelim, örnek olarak burada da kullandığım #94D730 rengini seçiyorum. Tasarımcılar için vazgeçilmez olan Photoshop programını açıyorum. 40×40 piksellik bir döküman ile başlıyorum ve 40 piksel çapında bu renkte bir daire çiyorum. Anti-alias seçili olması sizi keskin ve pikselleşmiş görüntüden kurtararak yumuşak kenarları olan bir çizim yapmanızı sağlar. Bu dairenin dörtte birini kırparak 20×20 piksel boyutlarında bir çeyrek daire oluşturup bunu kaydediyorum. Sonra 90 dereceler halinde döndürerek diğer köşeleri de kaydediyorum ve elimde dört adet köşe grafiği oluyor.

1. Sol Üst için grafik
2. Sağ Üst için grafik
3. Sol Alt için grafik
4. Sağ Alt için grafik

CSS dosyamıza aşağıdaki biçimlendirmeyi ekliyoruz;

.yuvarlak_kose {
background-color:#94D730 ;
color: #FFFFFF;
width: 400px;
}
.yuvarlak_kose p {
margin: 0 15px;
}
.yuvarlak_kose_ust {
background: url(ustsag.jpg) no-repeat top right;
}
.yuvarlak_kose_alt {
background: url(altsag.jpg) no-repeat top right;
}
img.koseler {
border: none;
width: 20px;
height: 20px;
display: block;
}

PHP veya HTML sayfamızda ise aşağıdaki şekilde kullanıyoruz:

<div class="yuvarlak_kose">
<div class="yuvarlak_kose_ust"><img src="ustsol.jpg" height="20" width="20" /></div>
Son zamanlar&#305;n g&ouml;zde dijital manip&uuml;lasyonu hdr.
Yani tam a&ccedil;&#305;l&#305;m&#305;yla High Dinamic Range. Elimizin alt&#305;ndaki
en b&uuml;y&uuml;k bilgi kayna&#287;&#305;m&#305;z internete &#351;&ouml;yle bir bakt&#305;&#287;&#305;m&#305;zda
bu konuda yeterince kaynak bulabiliyoruz. Yine de bu i&#351;i
hi&ccedil; bilmeyenlere ve bal&#305;klama dalmak isteyenlere
a&ccedil;&#305;klama gere&#287;i duydum..
<div class="yuvarlak_kose_alt"><img src="altsol.jpg" height="20" width="20" /></div>
</div>

Köşelerin boyutunu 20 piksel olarak değilde daha küçük alabilirsiniz. Dikdörtgenin boyutunu da temanıza göre düzenleyebilirsiniz. Aşağıya örnek dosya ve grafikleri incelemeniz için ekliyorum. Tüm dosyalar aynı klasör içinde olacak şekilde açarak test edebilirsiniz. Kolay gelsin..