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

Advertisement

Convert .docx file to .doc file

Hi Friends,

You guys might have come across a situation like this, someone sending a file to you which was written in MS Office 2007. But unfortunately you have MS Office 2003 installed in your office machine. The word document sent by the other person is in .docx format.

I searched microsoft site to find a file format converter, which was 27 MB ( earlier it was around 170 MB i guess but not sure) . This is what the reason i hate microsoft somuch. A Open Office can open all its files + all versions of microsoft office, why cant these guys.

Here found converting this file < 60 Seconds method
– Open your gmail account and attach the .docx file you have and send it to your won gmail id or forward the mail which has .docx attachment to your gmail account.
-Open the mail which has this attachment, click on the link “Open as a Google document”
-It will does the job in < 10 Seconds.
-On top right corner of the page, you can see a link called share, click on it and select email as attachment.