Create rounded corners and shadow without touching the HTML

Hi,

Here I start with a wonderful method to create rounded corner divs with drop shadow. You no need to touch the HTML for this!!! šŸ™‚ [You can see how it looks our final thing as shown in above image]

Here i have used Jquery to make this work. You need to specify one common class name for all the div’s which require rounded corners. In jQuery i am going to scan all theseĀ class namesĀ and append 4 <div>’s which createĀ roundedĀ corners. Also i am going to find out the width for all the divs and for each div i am going to insert another <div> which creates the drop shadow.

<div class="roundedCornerDiv">
	<div class="module-header">
		<h4>Title of the box 8</h4>
	</div>
	<div class="module-body">
		Aliquip luptatum concludaturque ad nam, qui eu quod vocibus, pri lorem graecis accommodare ne. Te sumo necessitatibus nec, sea cu virtute alterum, sed ad cibo posidonium. Ius postea tibique mnesarchum ad.
	</div>
</div>

Note the class name “roundedCornerDiv” which is our actual div for which we are going to make rounded corners and bottom shadow. This div contains two blocks header and body modules.

We are going to write a simple jQuery method to append 4 divs for rounded corner and one div for drop shadow. The code is as shown below

$(document).ready(function() {
	$('.roundedCornerDiv').each(
		function(){
			$(this).append('<div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>');
			$("<div class=\"dropShadow\"></div>").width($(this).outerWidth() - 7).appendTo($(this));
		}
	);
});

Befor doing all these things please include jQuery library and YUI grid library which makes our layout looks good and provide with jQuery pre defined functions


<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Create the rounded corner sprite image from any graphics editor like photoshp

Here is the CSS for our positioning rounded corners

.roundedCornerDiv {
	padding: 10px;
	border: 1px solid #f88907;
	background: #FFF;
	position: relative;
	margin-bottom: 16px;
}
.roundedCornerDiv .tl,
.roundedCornerDiv .tr,
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	position: absolute;
	width: 4px;
	height: 4px;
	overflow: hidden;
	background: url(../images/sprite.png) 0 0 no-repeat;
}
.roundedCornerDiv .tl {
	top: -1px;
	left: -1px;
}
.roundedCornerDiv .tr {
	top: -1px;
	right: -1px;
	background-position: -4px 0;
}
.roundedCornerDiv .bl {
	bottom: -1px;
	left: -1px;
	background-position: -12px 0;
}
.roundedCornerDiv .br {
	bottom: -1px;
	right: -1px;
	background-position: -8px 0;
}
.roundedCornerDiv .dropShadow {
	height: 10px;
	background: url(../images/dropshadow.png) 0 0 repeat-x;
	position: absolute;
	bottom: -11px;
	left: 3px;
	overflow: hidden;
}
.roundedCornerDiv .module-header {
	font-style: italic;
	border-bottom: 1px solid #333;
	font-size: 110%;
	margin-bottom: 8px;
}

/* Below things are for idiot IE6 only: WTF? */
.roundedCornerDiv .dropShadow {
	_bottom: -12px;
}
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	_bottom: -2px;
}
.yui-g .yui-g .roundedCornerDiv .tr,
.yui-g .yui-g .roundedCornerDiv .br ,
.yui-gb .roundedCornerDiv .tr,
.yui-gb .roundedCornerDiv .br  {
	_right: -2px;
}
.roundedCornerDiv  {
	_height: 1%;
	_zoom: 1;
}
.roundedCornerDiv .dropShadow {
	_zoom: 1;
}

I am a opensource guy. You can use the above code without any license. Happy coding šŸ™‚

Demo

Download the source code

Advertisements

3 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s