Shows some of the things bevel.js does.

Download bevel.js and include it into your webpage.

<script type="text/javascript" src="bevel.js"></script>

To add bevels just add a class="bevel" to the image.

• 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

If you want flexibility, use "cvi_bevel_lib.js" instead of "bevel.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).

Set defaults using Javascript

cvi_bevel.defaultRadius = 20; //INT 20-40 (%)
cvi_bevel.defaultGlow = 33; //INT 1-100 (% opacity)
cvi_bevel.defaultShine = 40; //INT 1-100 (% opacity)
cvi_bevel.defaultShade = 50; //INT 1-100 (% opacity)
cvi_bevel.defaultGlowcolor = '#000000'; //STR '#000000'-'#ffffff'
cvi_bevel.defaultShinecolor = '#ffffff'; //STR '#000000'-'#ffffff'
cvi_bevel.defaultShadecolor = '#000000'; //STR '#000000'-'#ffffff'
cvi_bevel.defaultBackcolor = '#0080ff'; //STR '#000000'-'#ffffff'
cvi_bevel.defaultFillcolor = '#0080ff'; //STR '#000000'-'#ffffff'
cvi_bevel.defaultLinear = false; //BOOLEAN
cvi_bevel.defaultUsemask = false; //BOOLEAN
cvi_bevel.defaultNoglow = false; //BOOLEAN
cvi_bevel.defaultNoshine = false; //BOOLEAN
cvi_bevel.defaultNoshade = false; //BOOLEAN

Add images using Javascript

cvi_bevel.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, glow: value, shine: value, shade: value, glowcolor: value, shinecolor: value, shadecolor: value, backcolor: value, fillcolor: value, linear: value, noglow: value, noshine: value, noshade: value, usemask: value }

Example:

cvi_bevel.add(document.getElementById("myimg"), { shine: 75, shade: 10 });

Modify images using Javascript

cvi_bevel.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.

Example:

cvi_bevel.modify(document.getElementById("myimg"), { radius: 50 });

Remove effect from an image using Javascript

cvi_bevel.remove(image);

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

In older browsers, the script degrades and your visitors won't notice a thing.

Please read the License before you download bevel.js 1.2

Please read the Frequently Asked Questions before you contact the author.

Version 1.2

• FF rendering bug removed

• IE rendering bug removed

• Initial Release

Please leave any comments at this contact formular.

bevel.js and cvi_bevel_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.