Thursday, April 19th, 2007
Canvas Corner 1.0
Category: UI
, Canvas, Unobtrusive JS
Christian Effenberger was inspired by the reflection code and decided to implement Corner.js.
The library uses unobtrusive JavaScript and microformats to allow users to simply add class names to an img tag to render them with corner effects, all via Canvas.
If you wanted to add a shaded corner you would say:
4.4 rating from 77 votes
Looks amazing! Too bad it just works in 20% of all browsers and you can’t rely on it for a real design…
Not sure what you mean by “can’t rely on it for a real design”, but in my opinion, it can be used in a production site or web app. It’s a cosmetic feature that wouldn’t limit any functionality. In addition, it gracefully degrades for IEs. Personally, I am not a huge fan on reflection of images but I like to make round corners of images. So this library is huge plus.
There is an IE Canvas implementation out there, and it works just fine. With that you’ll have support for all the major browsers. I think this library is a great idea.
Am I missing something or is this a step backwards in separation of presentation from markup? Assigning literal class names to tags is is not a best practice. The effect looks pretty bad too, but that’s another issue altogether.
I’d be inclined to agree with Dan about that. Also, I’m not sure that simply putting values in a class attribute and referencing them in JS could be called a microformat.
What doest this mean - “Freely distributable under GPL”, which is on the header of corner.js?
Can I use this on our commercial software? or we have to open source our software if we want to use this?
You are granted to freely use, reproduce, modify, distribute and publish.
This is nice, but I agree with Dan and Andy that using @class is inappropriate. Things like this should ideally be done by getting the script to pick up CSS properties off the element.
I think this looks like a great way to do rounded corners. If you manage to get IE working, it would be a huge plus though.
if its just for images, why don’t you just edit the image in photoshop then you have less to load in the first place LMAO
Because cornering 5000 images in Photoshop can be tiresome, retard.
my IE7 foes not diaplay anything. (FF does…)
OH;
it’s not supposed to without explorer canvas. sorry,
Very cool, I think it would be great when it also support Flash Image Replacement’s capability.
It is amazing to use for images. But is there any version to apply to as div container. In this way I could make rounded corners to boxes in websites.
That wouldn’t be possible since canvas cannot render html afaik. You’ll have to wait for CSS 3 on that one or use another library for round corners on borders.
It’s unfortunate this library doesn’t support Ie (not with excanvas either really, it’s too incomplete). But I still use it for the 20% that have it. Gives a nice touch in an easy way.
This lib looks great, and I really would like to use it, but when I try to put it in my code for some webdot generated graphs, it works but it does not support the map… any idea how I could have it working ?
I played a bit with the script, but I cant find the way to set ‘ismap’ in the canvas object ;(
Sorry, but usemap and ismap are not supported by the canvas object!
do you think it is possible to put the canvas object in the img.style.background object ? this way it could may be possible to apply the effect to the background image and keep a transparent one in the img.src to preserve the map…
or may be it is possible to not remplace the img by the canvas, but create a bitmap with the canvas and put it in the img ?
new version 1.2 supports usemap by creating canvas without replacing of the original image if it’s surrounded by a block element.
Added support for Internet Explorer 6/7 in Corner.js 1.3
Added an alternativ glossy shading script called “Glossy.js”
The new version 1.3 works great with the Internet Explorer even thought it is a little bit more edgy. BUT: Some customer of mine said it has a detection of an IE / Windows Virus Exploit!!! Something in corner.js … don´t know where, yet. Boy do I hate Windows ;-)
So do I.
The Virus/Exploit is falsely detected because of this single line…
document.namespaces.add(”v”, “urn:schemas-microsoft-com:vml”);
Added soft shadow support for Internet Explorer 6/7 in 1.5
I have the same problem with ie, my antivir toolkit says, that the corner.js is a exploit/virus.
Greetings, darki