Corner.js 1.4 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.

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"

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]

class =
"corners iradius32"

class =
"corners iradiae1010"

class =
"corners"

Supports "usemap"

Why use Javascript Image Corners?

• Fast and easy to implement. Just add class="corner iradius[n]" 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.

Restrictions

Opera do not support printing of canvas.

Credits

Original idea is mine but the inspiration for the script came from reflection.js.

History

• Added support for img attributes:
  id alt title src onclick
• Added Internet Explorer support for iradiae

• Added support for Internet Explorer 6/7
  (iradiae is missing and shading isn't complete)

• Added usemap support for block element surrounded images

• Added soft shadows
• Appended justcorners.js

• Initial Release

License

Images used are copyrighted and are used for demonstration only.

www.netzgesta.de  also visit  S5 Reloaded • AJAX-FilmDB • Glossy.js • Instant.js • Slided.js • Filmed.js • Loupe.js