windowpane
12-22-2006, 11:56 PM
Hi everybody,
I want to share how to make curvy corner
box easily by using javascript/css and without using image.
I also use it in my web page. I haven't seen any problem at
browsers yet, it works fine.
1)
Download the latest version of rounded_corner script from www.curvycorners.net/downloads.php
and attach the scripts into your page's <head> section;
<script type="text/JavaScript" src="rounded_corners.js"></script>
<script type="text/JavaScript" src="rounded_corners_script.js"></script>
2)
Define a css class for your box. I name it as mytable and define width, height, border, background vs properties.
It's up to you to give inner padding for your box. I define a different class for padding. You can see it at the code below.
.mytable {
width : 400px;
height : 200px;
color : #B6B6B6;
text-align : left;
padding : 0px;
margin-top : 65px;
border : solid 5px #FFFFFF;
background-color : #363636;
}
3)
Edit your rounded_corners.js file. You'll see the usage of script for your boxes.
settings I define the radius of 12px.
settings = {
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
var myBoxObject = new curvyCorners(settings, "mytable");
myBoxObject.applyCornersToAll();
4)
Use your curvy cornered box everywhere. :)
<div class="mytable">
Content.
</div>
To see this example, visit:
http://www.galipcelik.com/curvycorner/index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Curvy corner with js</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script type="text/JavaScript" src="rounded_corners.js"></script>
<script type="text/JavaScript" src="rounded_corners_script.js"></script>
<style>
body {
margin : 0;
padding : 0;
font-size : 11px;
font-family : arial;
color : #7A7A7A;
background-color : #7A7A7A;
}
.mytable {
width : 400px;
height : 200px;
color : #B6B6B6;
text-align : left;
padding : 0px;
margin-top : 65px;
border : solid 5px #FFFFFF;
background-color : #363636;
}
.mytable2 {
width : 400px;
height : 200px;
color : #000000;
text-align : left;
padding : 0px;
margin-top : 65px;
background-color : #FFFFFF;
}
.innertube {
padding : 0 10px 0 10px;
}
</style>
</head>
<body>
<div align="center">
<div class="mytable">
<div class="innertube">
Content goes here.<br /><br />
It's a example of curvy corner box by using rounded_corner javascript and without using images.<br /><br />
This corner has 12px of radius.
</div>
</div>
<div class="mytable2">
<div class="innertube">
Content goes here.<br /><br />
It's a example of curvy corner box by using rounded_corner javascript and without using images.<br /><br />
This corner has 6px of radius.
</div>
</div>
</div>
</body>
</html>
I want to share how to make curvy corner
box easily by using javascript/css and without using image.
I also use it in my web page. I haven't seen any problem at
browsers yet, it works fine.
1)
Download the latest version of rounded_corner script from www.curvycorners.net/downloads.php
and attach the scripts into your page's <head> section;
<script type="text/JavaScript" src="rounded_corners.js"></script>
<script type="text/JavaScript" src="rounded_corners_script.js"></script>
2)
Define a css class for your box. I name it as mytable and define width, height, border, background vs properties.
It's up to you to give inner padding for your box. I define a different class for padding. You can see it at the code below.
.mytable {
width : 400px;
height : 200px;
color : #B6B6B6;
text-align : left;
padding : 0px;
margin-top : 65px;
border : solid 5px #FFFFFF;
background-color : #363636;
}
3)
Edit your rounded_corners.js file. You'll see the usage of script for your boxes.
settings I define the radius of 12px.
settings = {
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
var myBoxObject = new curvyCorners(settings, "mytable");
myBoxObject.applyCornersToAll();
4)
Use your curvy cornered box everywhere. :)
<div class="mytable">
Content.
</div>
To see this example, visit:
http://www.galipcelik.com/curvycorner/index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Curvy corner with js</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script type="text/JavaScript" src="rounded_corners.js"></script>
<script type="text/JavaScript" src="rounded_corners_script.js"></script>
<style>
body {
margin : 0;
padding : 0;
font-size : 11px;
font-family : arial;
color : #7A7A7A;
background-color : #7A7A7A;
}
.mytable {
width : 400px;
height : 200px;
color : #B6B6B6;
text-align : left;
padding : 0px;
margin-top : 65px;
border : solid 5px #FFFFFF;
background-color : #363636;
}
.mytable2 {
width : 400px;
height : 200px;
color : #000000;
text-align : left;
padding : 0px;
margin-top : 65px;
background-color : #FFFFFF;
}
.innertube {
padding : 0 10px 0 10px;
}
</style>
</head>
<body>
<div align="center">
<div class="mytable">
<div class="innertube">
Content goes here.<br /><br />
It's a example of curvy corner box by using rounded_corner javascript and without using images.<br /><br />
This corner has 12px of radius.
</div>
</div>
<div class="mytable2">
<div class="innertube">
Content goes here.<br /><br />
It's a example of curvy corner box by using rounded_corner javascript and without using images.<br /><br />
This corner has 6px of radius.
</div>
</div>
</div>
</body>
</html>