CVI
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+, Safari and IE6+. 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"

beautiful landscape

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

class =
"corners iradius32"


class =
"corners iradiae1010"


class =
"corners ibezel iborder1 icolorffffff"

Supports "usemap"

Koblenz Wiesbaden Mainz Frankfurt Mannheim Heidelberg Würzburg Bamberg Nürnberg Karlsruhe Heilbronn Stuttgart Ulm Augsburg Baden

Karte

Images used are copyrighted and are used for demonstration only.

Setting Up

Download corner.js and include it into your webpage.

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

Using It

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

Classes

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: 10 });
<img onLoad="cvi_corner.add(this, { shadow: 75, shade: 10 });" ...>

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_corners.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):

Why use Javascript Image Corners?

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

Download

Please read the license before you download corner.js 2.1

F.A.Q.

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

History

Version 2.1

Version 2.0 Version 1.9 Version 1.81 Version 1.8 Version 1.7 Version 1.6 Version 1.5 Version 1.4 Version 1.3 Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

corner.js, justcorners.js and cvi_corner_lib.js, cvi_corners_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.

Other Projects

corner.netzgesta.de © 2024 by Christian Effenberger :: Imprint feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong