Corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. CVI-lab: Get a fast impression of the effects and their illustration qualities.

Demonstration

Shows some of the things "corner.js" does.

class = "corner"

class = "corner ishade50"

class = "corner ishadow20"

class = "corner ishade50 ishadow20"

class = "corner ishadow40 inverse"

class = "corner iradius16"

class =
"corner iradius24 ishadow33 inverse"

class =
"corner iradius20 ishadow33"

class =
"corner iradius8 ishade75 ishadow33"

class =
"corner iradius16 ishade66 ishadow30"

class =
"corner iradius32 ishade50 ishadow25"

class =
"corner iradius48 ishade33"

Scaled and linked

2/3 image width and height

class =
"corner iradius12
ishade50 ishadow20"

1/2 image width & height

class =
"corner iradius10
ishade66 ishadow25"

1/3 width & height

class =
"corner
iradius8
ishade75
ishadow30"

justcorners.js instead of corner.js

• Initialisation class "corners"
• vary the radius by adding iradius followed by the desired radius in pixel:
  Corner radius class "iradius24" - min=0 max=100 default=16
• vary the corners by adding iradiae followed by the desired bits as bitchain:
  Corner selection class "iradiae1010" - default=1111 [top left|top right|bottom left|bottom right]
• vary the border by adding iborder followed by the desired width in pixel:
  Corner border class "iborder2" - min=0 max=100 default=0
• vary the border color by adding icolor followed by the color as string:
  Border color class "icolor0000ff" - min=000000 max=ffffff default=0000ff
• vary the corner type by adding ibezel
  Corner type class "ibezel"

class =
"corners iradius32"

class =
"corners iradiae1010"

class =
"corners ibezel iborder1 icolorffffff"

Supports "usemap"

Setting Up

Download "corner.js" and include it into your webpage.

Using It

To add corners just add a class="corner" and an additonal class like "iradius16" to the image.

Classes

• Initialisation class "corner"
• vary the radius by adding iradius followed by the desired radius in pixel:
  Corner radius class "iradius24" - min=0 max=100 default=0
• vary the shading by adding ishade followed by the desired opacity in percentage:
  Image shading class "ishade50" - min=0 max=100 default=0
• vary the shadow by adding ishadow followed by the desired opacity in percentage:
  Image shadow class "ishadow33" - min=0 max=100 default=0
• vary the shadow by adding inverse:
  Shadow invert class "inverse"

Scripting libs

If you want flexibility, use "cvi_corner_lib.js" instead of "corner.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_corner.defaultRadius = 0; //INT 0-100 (px)
cvi_corner.defaultShadow = 0; //INT 0-100 (% opacity)
cvi_corner.defaultShade = 0; //INT 0-100 (% opacity)
cvi_corner.defaultInverse = false; //BOOLEAN
If cvi_filter_lib.js is loaded also...
cvi_corner.defaultFilter = null; //OBJ [{f='grayscale'},{f='emboss', s:1}...]

Add images using Javascript

cvi_corner.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, shadow: value, shade: value, inverse: value, filter: value}

Examples:

cvi_corner.add(document.getElementById("myimg"), { shadow: 75, shade: 20 });
<img onLoad="cvi_corner.add(this, { shadow: 75, shade: 20 });" ...>

Modify images using Javascript

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

Example:

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

Remove effect from an image using Javascript

cvi_corner.remove(image);

Alternatively use "cvi_corners_lib.js" instead of "justcorners.js".

Set defaults using Javascript

cvi_corners.defaultXradius = 16; //INT 0-100 (px)
cvi_corners.defaultYradius = 0; //INT 0-100 (px)
cvi_corners.defaultCorners = "1111"; //STR "0000"-"1111" [top left|top right|bottom left|bottom right]
cvi_corners.defaultBorder = 0; //INT 0-100 (px borderwidth)
cvi_corners.defaultColor = "#0000ff"; //STR "#000000"-"#ffffff" bordercolor
cvi_corners.defaultOpacity = 100; //INT 0-100 (% borderopacity)
cvi_corners.defaultBezel = false; //BOOLEAN
If cvi_filter_lib.js is loaded also...
cvi_cornerr.defaultFilter = null; //OBJ [{f='grayscale'},{f='emboss', s:1}...]

Add images using Javascript

cvi_corners.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {xradius: value, yradius: value, corners: value, border: value, color: value, opacity: value, filter: value}

Examples:

cvi_corners.add(document.getElementById("myimg"), { corners: "1010" });
<img onLoad="cvi_corners.add(this, { corners: "1010" });" ...>

Modify images using Javascript

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

Example:

cvi_corners.modify(document.getElementById("myimg"), { xradius: 20, yradius: 10 });

Remove effect from an image using Javascript

cvi_corners.remove(image);

Support libs

If you are using the more flexible "cvi_corner_lib.js" instead of "corner.js" or "cvi_corners_lib.js" instead of "justcorners.js", you'll get access to additional features by the following support libraries (part of distribution):

• cvi_filter_lib.js supports image filtering capabilities. [WYSIWYG-Editor] [Home-Page]
  Provides image filter capability for Canvas (only if getImageData/setImageData is supported).
  
  filter : [{#1 filter options},{#2 filter options}...];
  options   e.g. {f: 'contrast', s: 1.5, ...}
  f == STRING filter name e.g. "invert" Default: null (required)

       "invert" Reverses all colors of the image
       "invertalpha" Reverses the transparency of the image
       "grayscale" Converts the image into grayscale
       "solarize" Solarizes the image by negating the colors
       "sepia" Applies the well-known sepia coloring to the image
       "threshold" Converts the image to black&white (s<1 == darker and s>1 == brighter)