CSS ile resim dosyasi kullanmadan yuvarlak koseler olusturma

web 2.0 ile butunlesen ve google’nin onem verdigi yeni nesil web sitelerinde yuvarlak koseler ( rounded corners ) kullanimi oldukca yaygin hale gelmistir.

ancak bircogumuzun yuvarlak kose olusturmakta zorlandigi kisim imaj ( jpg, gif ) dosyalarini sayfa arka plan rengine gore olusturup css ile div ler icerisine sag ust sol ust sag alt sol alt seklinde kodlar ekliyorduk. ancak kucuk bir javascript kodu ile bu durumu cozebilirsiniz. ayni zamanda koselerdeki derinlikleri rakam olarak buyuk yada kucuk olarak secebilme sansimizda mevcut.

calismamizin ornegini asagida gorebilirsiniz.

css rounded corners

sayfamizin kodlarinda gorunen
<script type=”text/javascript”>
Rounded(’rounded’, 13, 13);
</script>

script kodunu mutlaka icerikten sonra kapanis div tagindan once kullanmaliyiz. burada gorunen sayi (13) kosemizin derinligini gosteriyor. dilerseniz bu sayiyi daha yuksek yada kucuk bir rakamla degistirerek kosemizin derinligini duzenleyebiliriz.
Zuzum selamlar ;)

En kisa zamanda verileri ve resimleri yerlestiricem kusura bakmayin.

kaynak js dosyasini buradan indirebilirsiniz

butun dosyalari indirmek icin burayi tiklayin

Etiketler: , ,

Eğer yazıyı beğendiyseniz ya da ekleyecekleriniz varsa, lütfen yorumunuz yazın veya RSS aboneliği ile yeni yazılardan anında haberdar olun.

Yorumlar

[...] bu yuvarlak koseleri elde etmek icin 4 imaj ve 4 div tagi kullaniyorduk bu oldukca zahmetli ve kodlamalarda yuklenme meydana getiriyordu. kucuk 1 js dosyasi ile bu islemi resim dosyasi kullanmadan halledebiliyoruz. sayfasina buradan erisebilirsiniz CSS ile resim dosyasi kullanmadan yuvarlak koseler olusturma [...]

[...] bu yuvarlak koseleri elde etmek icin 4 imaj ve 4 div tagi kullaniyorduk bu oldukca zahmetli ve kodlamalarda yuklenme meydana getiriyordu. kucuk 1 js dosyasi ile bu islemi resim dosyasi kullanmadan halledebiliyoruz. sayfasina buradan erisebilirsiniz CSS ile resim dosyasi kullanmadan yuvarlak koseler olusturma [...]

Yorum Yazın

(gerekli)

(gerekli)