"Çalışmadan, öğrenmeden, yorulmadan rahat yaşamanın yollarını aramayı alışkanlık haline getirmiş milletler, evvela haysiyetlerini, sonra hürriyetlerini ve daha sonra da istikballerini kaybetmeye mahkumdurlar."

Mustafa Kemal ATATÜRK

yakuter


15 Temmuz 2006

Css İle Yuvarlak Köşeler

Etiketler: , ,
Kategori Css, Web |

Yazılarımızı çevreleyen çerçevelerin yuvarlak köşeli olmasını istiyorsanız bu makaleden faydalanabilirsiniz. İhtiyacımız olan oldukça basit, sade bir css kodu ve 4 ufak resim...


Öncelikle kendimize 4 tane köşe resmi yaratmalıyız. Bunu da şöyle yapabiliriz. Herhangi bir grafik programıyla (ben photoshop kullanıyorum) yandaki gibi yuvarlak köşeli bir resim çiziyoruz. Daha sonra bu resmin köşelerini şu şekilde ayırıyoruz.
İnternet sayfamıza şu kodları ekliyoruz. Örnek: Wordpress temanızın sidebar.php dosyası

Duz Metin
<div class="yuvarlak">
<div class="ust">
<img xsrc="tl.gif" alt=""
width="15" height="15" class="kose"
style="display: none" /></div>
Sitemizde bu şekilde yuvarlak köşeler kullanmak çok faydalı olabilir. Tabi bu kullanım içeriğe uygun olmalıdır.
Nasıl desem, mesela bu mantıkla şirin tasarımlar yaratılabilir. (aklıma daha uygun bir kelime gelmiyor :) )
<div class="alt">
<img xsrc="bl.gif" alt=""
width="15" height="15" class="kose"
style="display: none" /></div>
</div>
 

Stil dosyamıza da aşağıdaki kodları ekliyoruz.
Örnek: Wordpress temamızın style.css dosyası

Duz Metin
.yuvarlak {
width: 250px;
background-color: #f90;
color: #fff;
}

.yuvarlak p {
margin: 0 10px;
}

.ust {
background: url(tr.gif) no-repeat top right;
}

.alt {
background: url(br.gif) no-repeat top right;
}

img.kose {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

Bu kodları kullanarak oluşturacağımız görüntü

Daha şirin tasarımlar için başka bir css makalemizde görüşmek üzere ;)

Kaynak: Bu yazının orjinali (ingilizce) için tıklayınız.


Benzer Yazılar

“Css İle Yuvarlak Köşeler” için 1 Yorum

  • 1 browser
    15 Kasım 2007, 22:21

    oncelikle ornek icin cok tesekkur ederim, ellerinize saglik.
    merak ettigim ve basaramadigim bir sey var. sizin orneginizde sag ustteki kose (yuvarlak-tr.gif) class ile olusturulup sol ust kose de img etiketi ile eklenmis ve ust kisim meydana getirilmis. bunun tersini nasil yapabilirim? yani sol ust koseyi class ile olusturup, sag ust koseyi img etiketi ile ekleyip, ust kenari olusturmak istiyorum. ama maalesef yapamadim. umarim anlatabilmisimdir.
    saygilarimla…


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Tasarım Fallendesign.
Site içerisindeki içerikler izinsiz veya kaynak gösterilmeksizin kopyalanamaz, alıntı yapılamaz.

Wordpress Valid XHTML 1.0 Valid CSS