diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Apr192007

Corner 1.0: Give Canvas to Your Images

Christian Effenberger got the inspiration for the script from reflection.js to implement it into Corner.js.

Corner.js 1.0 allows you to add corners to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers and Internet Explorer, it’ll degrade and your visitors won’t notice a thing. It’s 6.4KB.

Setting Up

Upload 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

Download: corner.js 1.0

Demo:

 

Corner.js

Corner 1.0, Canvas, Shadow, Images, Java, Script, Javascript, UI

Share This Story, Choose Your Platform!

Do NOT follow this link or you will be banned from the site!