Kathirvel K

Archive for April 2009

The XHTML:

<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another one.</p>
	</div>
</div>

The CSS:

/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
	margin: 0 auto; /* center for now */
	width: 17em; /* ems so it will grow */
	background: url(sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}


		
		

For more:

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

http://www.tech-hive.com/2007/06/03/resizable-rounded-corners/

Advertisements
Tags:

//CSS
button{border:none;background:none;padding:0;margin:0; width:auto;overflow:visible;text-align:center;white-space:nowrap;height:40px;line-height:38px;}
button span, button em{display:block;height:40px;line-height:38px;margin:0;color:#954b05;}
button span{padding-left:20px;background:url(bg_button.gif) no-repeat 0 0;}
button em{font-style:normal;padding-right:20px;background:url(bg_button.gif) no-repeat 100% 0;}

//HTML

<button><span><em>My button</em></span></button>

//Note: background image should be gif format and non-transparent

Tags: