There exist many different approaches for creating rounded corners on HTML pages, and each of these approach has its problems. Javascript based solutions consume too much CPU cycles (and even more if doing anti aliasing), background-image based solutions are complicated (and even more, if done properly, e.g. sliding-doors based) and involve additional HTTP requests and solutions based on a bunch of DIVs (with border and varying margin to emulate the corner radius) turn any page into a horrible tag soup. The slickest solution, with the cleanest HTML and Javascript code I have seen so far is Greg Houston's mocha. It uses the canvas HTML tag, which is supported by Firefox, Safari and Opera 9. The ugly part of this solution is the heavy work-around required for Internet Explorer.
Tuesday, November 20, 2007
Rounded corners with canvas tag graphics
There exist many different approaches for creating rounded corners on HTML pages, and each of these approach has its problems. Javascript based solutions consume too much CPU cycles (and even more if doing anti aliasing), background-image based solutions are complicated (and even more, if done properly, e.g. sliding-doors based) and involve additional HTTP requests and solutions based on a bunch of DIVs (with border and varying margin to emulate the corner radius) turn any page into a horrible tag soup. The slickest solution, with the cleanest HTML and Javascript code I have seen so far is Greg Houston's mocha. It uses the canvas HTML tag, which is supported by Firefox, Safari and Opera 9. The ugly part of this solution is the heavy work-around required for Internet Explorer.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment