CSS3 ile yeni gelen border-radius özelliğini ne yazık ki bazı tarayıcılar desteklemiyor.Bu da bizi resim kullanmaya zorluyor tabi ki.Yeni yeni gelişen web 2.0 ‘ın tasarımında resim kullanarak border-radius özelliği vermeye hiç iyi bakılmıyor.Hal böyle olunca biz css3 teki border-radius özelliğini kullanırsak cross browser yani bir şablonun farklı tarayıcılarda benzer görünmemesi olayı oluyor.Bu da web tasarım camiasının en sevmediği şeylerden biridir.
Neyse, kütüphanemizin ismi Nifty.Javascript ve biraz da CSS kullanarak yazılmış bir kütüphane.Bizim yapacağımızı tek şey kütüphaneyi include edip yuvarlatılacak nesneyi vermemiz.Nifty’yi buradan indirebilirsiniz.İndirdikten sonra içindeki css ve js dosyalarını kullanacağınız klasöre atın ve yuvarlamaya başlayalım:)
Burda gördüğünüz gibi Nifty bize kolay bir selector sunuyor.jQuery ile aynı selector’u kullanan Nifty,class seçmek için de “.”(nokta) kullanıyor.Gördüğünüz gibi yukarıda “big” ibaresi var.Bu Nifty’nin 10px lik yuvarlatma kalıbıdır.Bunun yerine “small”,”transparent” de kullanabilirsiniz.Diyelim ki sadece sol alt ve sağ üst köşeyi yuvarlatmak istiyorsunuz.Gelin beraber yapalım:
Gördüğünüz bl , “bottom-left” tr ise “top-right” oluyor.Ayrıca br(“bottom-right”) ve tl(“top-left”) i de kullanmak mümkün.Lakin bazı browser’lar burada da sorun çıkarıyor.Örneğin internet explorer’da yüksekliğini(height) auto vermek zorundasınız.Ve div’in için boş ise yuvarlamaz.Boş div’leri yuvarlamak için ise div’in yüksekliği kadar “padding-top” verebilirsiniz.Nifty yuvarlama işlemini zemin rengine göre yapar.Yani div yine dikdörtgen şeklinde kalır ancak yuvarlanmış köşelerin dışındaki kısmı zemin rengi yapar.Makalemin sonuna gelirken keşke CSS3’ü her browser desteklese de biz böyle javascript kütüphaneleri ile uğraşmasak diyorum.Bir gün internet explorer da destekler umarım..
