Friday, December 14th, 2007
Canvas Bevel Script
The champion of unobtrusive canvas, Christian Effenberger, has come out with a new microformat script that enables you to add bevels to your images (and also shading, shining and glowing).
Why would you want to do this via canvas?
- Fast and easy to implement. Just add class=”bevel” to the image and your good to go
- Don’t need to spend time in an image editor creating images with corners
- Works really well with forum avatars. Doesn’t require additional server work
- It’s dead easy to change the attributes of the corners
- Free of charge use on non-commercial and private web sites.
The microformat
- Initialisation class “bevel“
- vary the radius by adding iradius followed by the desired radius in percent:
Image radius class “iradius20” - min=20 max=40 default=20 - vary the masking by adding usemask:
Image masking class “usemask“ - vary the masking by adding ibackcol followed by the color:
Mask color class “ibackcol” - min=000000 max=ffffff default=0080ff - vary the masking by adding ifillcol followed by the color:
Mask color class “ifillcol” - min=000000 max=ffffff default=ibackcol - vary the glowing by adding noglow:
Image glowing class “noglow“ - vary the glowing by adding iglowopac followed by the desired opacity in percent:
Glow opacity class “iglowopac” - min=1 max=100 default=33 - vary the glowcolor by adding iglowcol followed by the color:
Glow color class “iglowcol” - min=000000 max=ffffff default=000000 - vary the shining by adding noshine:
Image shining class “noshine“ - vary the shining by adding ishineopac followed by the desired opacity in percent:
Shine opacity class “ishineopac” - min=1 max=100 default=40 - vary the shinecolor by adding ishinecol followed by the color:
Shine color class “ishinecol” - min=000000 max=ffffff default=ffffff - vary the shading by adding noshade:
Image shading class “noshade“ - vary the shading by adding ishadeopac followed by the desired opacity in percent:
Shade opacity class “ishadeopac” - min=1 max=100 default=50 - vary the shading by adding islinear:
Shade gradient class “islinear“ - vary the shadecolor by adding ishadecol followed by the color:
Shade color class “ishadecol” - min=000000 max=ffffff default=000000
4.3 rating from 50 votes
The best effect is Shade gradient class “islinear”!
“Fast and easy to implement. Just add class=”bevel” to the image and your good to go”
“you’re good to go”, not “your good to go”
For some reason, looking at the results, I get the feeling the next library will be something that creates little funny animations and animated black/yellow bars with the words ‘under construction’ on them.
@Diodeus
Say it with flowers: http://www.voidspace.org.uk/gallery/silly/html/bob’s_guide_to_the_apostrophe.html
@Diodeus
If you’re going to be the English police, why didn’t you also point out that “Fast and easy to implement.” is a sentence fragment?
Nice work.
Personally i think that the library could be extended to another block-level elements, like DIV; however, i’ll bookmark it, perhaps someday it will save my life :)
P.S.: The error indicated by Diodeus was written by the blog author, but now i’m afraid for commenting here, because English is my secondary language and i haven’t learned all the grammar rules yet :(
Hi guys,
I just wasted a day until I realized that if you use bevel, you won’t be able to access the image src attribute in IE6 via javascript. First, I thought something was wrong with my code but I realized everything works fine when bevel is removed. Therefore, don’t use this if you are going to do things like changing the image src. IE sucks!