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

“CSS ile resim dosyasi kullanmadan yuvarlak koseler olusturma” üzerine 8 düşünce

  1. Nifty Round Corners tarafından hazırlanan bu betiği izin almadan ve kaynak dosya isimlerini değiştirerek ve alıntı ve kaynak belirtmeden yayınlanamınız hiç hoş olmamış.Umarım bu yanlışı düzeltirsiniz…

  2. Bunu Javascript olmadan da yapabiliriz.
    Sadece şu kodları CSS dosyanıza girin:
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px transparent solid;
    Not: Eğer CSS’nizi doğrulamak isterseniz bunlar bir engel oluşturabilir.

  3. Emeğine sağlık, AMA arkaplana imaj atınca yuvarlamalar olmuyoo..
    İnternette bulunan hemen hemen tüm örnekleri deneyen biri olarak şimdilik bu olanağa sahip değiliz diyebilirim !!!
    İnşallah bi gün onu da yapabiliriz 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir