Her ne kadar yeni nesil tarayıcılarda CSS ile pratik bir şekilde dilediğimiz ölçülerde yuvarlak köşe oluşturabilsek de, microsoft internet explorer tarayıcıları henüz bu özelliği desteklememektedir.
Mozilla Firefox, Google Chrome, Safari gibi popüler web tarayıcı için aşağıdaki CSS kodları istenilen yuvarlak köşelere uyum gösteriyor.
[sourcecode lang="php">
[/sourcecode]
Curvy Corners javascript apisi ile birlikte hızlıca bütün tarayıcılarda kusursuz çalışan yuvarlak köşeler yapabilirsiniz.
Öncelikle CurvyCorners.js dosyasını indiriyoruz.
Yeni bir index.html dosyası oluşturup aşağıdaki kodları içine yapıştırın.
[sourcecode lang="php"]
addEvent(window, 'load', initCorners);
function initCorners() { var settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antiAlias: true }
/* Usage:
curvyCorners(settingsObj, selectorStr); curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);
selectorStr ::= complexSelector [, complexSelector]... complexSelector ::= singleSelector[ singleSelector] singleSelector ::= idType | classType idType ::= #id classType ::= [tagName].className tagName ::= div|p|form|blockquote|frameset // others may work className : .name selector examples: #mydiv p.rounded #mypara .rounded */ curvyCorners(settings, "#myBox"); }
Curvy Corners by Serpito
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Reading this stuff will rot your mind. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
Bu sayfa curvyCorners ile yuvarlak köşeler için hazırlanan demoyu inceliyorsunuz.
[sourcecode]
Uygulamanın demosu için tıklayınız.
Curvy Corners dosyalarının tamamını indirmek için tıklayınız.





One comment
Uygulama açısından çok güzel.Bu sayede artık background resmi kullanma sıkıntısından kurtulacağız.Teşekkürler.