Advanced Search

Return to Snippet

Revision: 17485
at September 6, 2009 22:54 by enchance
Updated Code 
/*
HTML source:
<div class="rounded">
	<div class="crv_top"><div></div></div>
	<div class="info">z</div>
	<div class="crv_btm"><div></div></div>
</div>
*/

.rounded {width:200px; margin:100px auto 0; background:#a7c8dc;}
.rounded .crv_top, .rounded .crv_top div, .rounded .crv_btm, .rounded .crv_btm div {height:3px; background:url(curves.gif) 0 0 no-repeat; _font-size:0;}
.rounded .crv_top {background-position:right -3px;}
.rounded .crv_btm {background-position:right -9px;}
.rounded .crv_btm div {background-position:0 -6px;}

Revision: 17484
at September 6, 2009 22:53 by enchance
Updated Code 
/*
HTML source:
<div class="rounded">
	<div class="crv_top"><div></div></div>
	<div class="info">z</div>
	<div class="crv_btm"><div></div></div>
</div>
*/

.rounded {width:200px; margin:100px auto 0; background:#a7c8dc;}
.rounded .crv_top, .rounded .crv_top div, .rounded .crv_btm, .rounded .crv_btm div {height:3px; background:url(curves.gif) 0 0 no-repeat; font-size:0;}
.rounded .crv_top {background-position:right -3px;}
.rounded .crv_btm {background-position:right -9px;}
.rounded .crv_btm div {background-position:0 -6px;}

Revision: 17483
at September 6, 2009 22:50 by enchance
Updated Code 
/*
HTML source:
<div class="rounded">
	<div class="crv_top"><div></div></div>
	<div class="info">Sample text</div>
	<div class="crv_btm"><div></div></div>
</div>
*/

.rounded {width:200px; margin:0 auto; background:#a7c8dc;}
.rounded .crv_top, .rounded .crv_top div, .rounded .crv_btm, .rounded .crv_btm div {height:3px; background:url(media/crvs.gif) 0 0 no-repeat; font-size:0;}
.rounded .crv_top {background-position:right -3px;}
.rounded .crv_btm {background-position:right -9px;}
.rounded .crv_btm div {background-position:0 -6px;}

Revision: 17482
at September 6, 2009 22:38 by enchance
Initial Code 
HTML:
<div class="rounded">
	<div class="crv_top"><div></div></div>
	<div class="info">Sample text</div>
	<div class="crv_btm"><div></div></div>
</div>

CSS:
.rounded {width:200px; margin:0 auto; background:#a7c8dc;}
.rounded .crv_top, .rounded .crv_top div, .rounded .crv_btm, .rounded .crv_btm div {height:3px; background:url(media/crvs.gif) 0 0 no-repeat; font-size:0;}
.rounded .crv_top {background-position:right -3px;}
.rounded .crv_btm {background-position:right -9px;}
.rounded .crv_btm div {background-position:0 -6px;}
Initial URL 









Initial Description





<p>Cross-browser compatible especially for IE6/7 and makes use of CSS sprites for faster downloading. Download file <a href="http://johnimbong.com/blog/wp-content/uploads/2009/09/curves.zip">curves.zip (75 bytes)</a> which contains the CSS sprite needed to make this work.</p>









Initial Title





Optimized CSS Rounded Corners Using Sprites









Initial Tags





css









Initial Language





CSS