Tuesday, October 6, 2009

Rounded Corner Box Model and +

This is my first blog post. :)
Here i will discuss about the corners styling for the box models or div tags used in HTML.
I have created a javascript template class (js library called CBox.js), which easily creates the rounded-cornered colored Box. Using it we can create 3 types of corners: convex, concave and strike.
This library creates the Table layout and uses graphics code take from here .
It works only on colored Boxes and allows greater extending of corners.
It has pros and cons, check below and it works on all major browsers.



Please Note: that it creates style-corner colored Box model, not simple corner Border.

Usage Example:
<html>
<head>
<script type="text/javascript" src="Demo\CBox.js"></script>
<script>
window.onload=function(){
var content="Few Lines: Line one, line two, line three etc.";
var obj=new CBox("div1",content,100,150,null,"#ffccdd",1,20);
obj.Draw();  }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

API documentation of library:
CBox(Container,Content,Box_height,Box_width,Page_color,Box_color,Corner_Type,Corner_Extent)
Container ->Box holder
Content ->content to be displayed in Box (usually text).
Box_height ->height of the Box
Box_width ->width of the Box
Page_color ->background color used for WebPage or Container, if any, otherwise set to null.
Box_color -> color compulsory. should not be null.
Corner_Type -> corner style, should be one of these: 1 (convex) or 2 (concave) or 3 (strike).
Corner_Extent ->area of corner-style, should be greater than or equal to 20.
- colors can be Hexa or NamedColors.
- Box should be colored.

Pros and Cons:
-Javascript browser detection and huge code for graphics.
- Box must be Colored.
- for Opera browser Corner_Extent will always be 25. may not suit for all webpages. (If (div) Container is floating, then reinvoke CBox() under window.onresize event)
- 3 Corner styles to choose from.
- Corners area can be extended.
- works on all major (known) browsers. (as of this date).

Download and Demo:
Check the demo here!
Download the Zip file here!

Corner/Curve bordered Box:
We can easily create rounded-corner bordered box model for firefox, chrome etc. browsers using this simple CSS:

.curved {-moz-border-radius:10px;

-webkit-border-radius:10px;}

But it will not work in IE, and neither IE has any simple CSS option.

for work around solution, try below simple HTML:
Store 1 <fieldset>
<legend>Store 1</legend>
<label for="data">Data:</label>
<textarea id="data"> some data here </textarea>
</fieldset>

ofcourse we don't get greater extent of rounded corner with it.
Another solution for simple Round-corner Border, which works in IE, check this.

No comments:

Post a Comment