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