Curvy corner box example (without using image, with js and css)

windowpane · #1 12-22-2006, 10: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.

Code:

.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.

Code:

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

Code:

<!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>

mwinter · #2 12-23-2006, 10:41 PM

Quote:

Originally Posted by windowpane

I want to share how to make curvy corner
box easily by using javascript/css and without using image.

Why bother? What you do with 30KBs of client-side code can be done with images for a whole lot less.

Mike

windowpane · #3 12-24-2006, 06:45 PM

Quote:

Originally Posted by mwinter

Why bother? What you do with 30KBs of client-side code can be done with images for a whole lot less.

Mike

sure, but if you have different coloured boxes it's useful than cropping images for corners.
It's loss of time and work. Especially when you have more than one projects that you must finish in time.

Packa_G · #4 08-20-2008, 08:46 AM

hello ,
i am just trying to curve an images , (which is as a Div Background)
with its Actual Width and Height ,
but i have to modify the CSS again and again ,
.myBox
{
margin: 0 auto;
border: 0px solid #ffffff;
color: #ffffff;
width: 879px;
height: 590px;
padding: 20px;
text-align: left;
/*border: 3px solid #ffffff;*/
background-image: url(back_test.jpg);
background-repeat: no-repeat;

}

width and Height Properties are not Actual Properties of the Image ,
Is it Possible ,

Any help will be Appriciated ,
Regards.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search