Friday, December 14th, 2007

Canvas Bevel Script

Category: Canvas, Component

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

Canvas Bevel

Posted by Dion Almaer at 6:59 am
7 Comments

++++-
4.2 rating from 56 votes

7 Comments »

Comments feed TrackBack URI

The best effect is Shade gradient class “islinear”!

Comment by Snowcore — December 14, 2007

“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”

Comment by Diodeus — December 14, 2007

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.

Comment by Marc — December 14, 2007

@Diodeus

Say it with flowers: http://www.voidspace.org.uk/gallery/silly/html/bob's_guide_to_the_apostrophe.html

Comment by Joeri — December 14, 2007

@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?

Comment by Andy Kant — December 14, 2007

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 :(

Comment by HudsonTavares — December 14, 2007

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!

Comment by farazmit — December 29, 2007

Leave a comment

You must be logged in to post a comment.