Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.
Usage:
$('.myclass').curve(options)
Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw
Example JavaScript
$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})Example HTML
<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>
Result
The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.
* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux
Visit the Cornerz homepage to view some demos or click here to see the source.
Delicious
Digg
StumbleUpon
Propeller
Reddit
Magnoliacom
Newsvine
Furl
Facebook
Google
Yahoo
Technorati
Icerocket
[...] Cornerz v0.2 - A Canvas/VML jQuery Plugin By Mark Gharibian Tested on : - IE6 XP/Vista - IE7 XP/Vista - Firefox 2 Ubuntu/Windows - Safari 3 Windows - Opera 9 Windows/Linux. Visit the Cornerz homepage to view some demos or click here to see the source. Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]
I found out that the following code will allow you to inject the namespace and the behavior into an html document without it. The doctype of the document is
var ss = document.createElement('STYLE');
document.documentElement.firstChild.appendChild(ss);
ss = document.styleSheets[document.styleSheets.length - 1];
ss.addRule('v\\:*','behavior: url(#default#VML);display:inline-block');
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
Post new comment