With the influx of 'Web2.0' look and feel web-sites, the prevalence of curvy corners has caught the imagination of web-designers. While the majority of web sites having curvy corners require digital editing. In simple language, you would normally create an image with curved corners, cut off the corners and stick it into your web-page to get the appropriate look. However, if you aren't much of a digital web-designer, you would prefer to go in for curvy corners.
Curvy corners is a free Javascript library that allows you to create on-the-fly DIVs with curved corners. While implementing the library and using it to get the required effect is easy, some tinkering might be required to your own CSS files before you can get it work.
The logic behind curvy corners is that it 'straps' on 20px to your existing DIVs. The additional 20 px inherit the look and feel of the DIV element that you specify and so they look like a natural extension of the same div.
A few problems that you should watch out for is that padding within the specified DIV (that gets curvy corners applied to it) disappears. You can configure the padding parameter to come back on by setting the auto-pad flag to true but it applies padding by implementing a work-around. The 'work-around' is an inner DIV that is created on the fly and all text that was a part of the original DIV gets moved into the inner DIV. Thus, the original DIV becomes a parent of the new 'inner' DIV. In my case, this broke some of the other JavaScript functionality, like my DateTime picker stopped working as it could not figure out the DIV that it belonged to.
To summarise, while Curvy Corners is an excellent snappy script that gives you curvy corners without digital editing, it may mess up some of your existing Javascript libraries so be sure to test your application in FF and IE after applying curvy corners. Happy Rounding Off!!
Curvy corners is a free Javascript library that allows you to create on-the-fly DIVs with curved corners. While implementing the library and using it to get the required effect is easy, some tinkering might be required to your own CSS files before you can get it work.
The logic behind curvy corners is that it 'straps' on 20px to your existing DIVs. The additional 20 px inherit the look and feel of the DIV element that you specify and so they look like a natural extension of the same div.
A few problems that you should watch out for is that padding within the specified DIV (that gets curvy corners applied to it) disappears. You can configure the padding parameter to come back on by setting the auto-pad flag to true but it applies padding by implementing a work-around. The 'work-around' is an inner DIV that is created on the fly and all text that was a part of the original DIV gets moved into the inner DIV. Thus, the original DIV becomes a parent of the new 'inner' DIV. In my case, this broke some of the other JavaScript functionality, like my DateTime picker stopped working as it could not figure out the DIV that it belonged to.
To summarise, while Curvy Corners is an excellent snappy script that gives you curvy corners without digital editing, it may mess up some of your existing Javascript libraries so be sure to test your application in FF and IE after applying curvy corners. Happy Rounding Off!!
No comments:
Post a Comment