Few days back i was just browsing through one of the website casually, and one thing that drew my attention was the curve used in the website. Immediately i started to inspect the code and i was amazed to see that no images were used to create that curve. It was done purely through CSS. Then i spent few hours to learn the CSS trick and i prepared my own.
I have put my HTML code and the CSS that i created. I am sure that this will help the CSS designers around the world.
/****************************HTML code**************************************/
<html>
<head>
<link href="curvedbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="curvedBox">
<span>
<span class="r1" ></span>
<span class="r2" ></span>
<span class="r3" ></span>
<span class="r4" ></span>
</span>
<div class="content">
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class="r4" ></span>
<span class="r3" ></span>
<span class="r2" ></span>
<span class="r1" ></span>
</span>
</div>
</body>
</html>
/**************************curvedbox.css*****************************************/
body {background-color:#000;}
.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}
.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}
14 comments:
awesome logic man . thanks. my boss is happy wid me. :)
Thanks so much! it worked perfect!
More the number of <span> you have, more smoother will be the curve
as long as i put text in content div its fine but i want to style the diff divs withing the content div. but current css dsign here doesnt support float:left to b used for those divs.
I have made a sample application which has DIV's floated. Checkout the sample at http://www.thinkpixels.net/experiments/csscurve/
You can also download the source file.
thank you
It works perfectly......great work
Awesome.... Great...Thanks for sharing
Hmm when you look at it on a iPhone you get little grey borders unless you zoom in real far, look http://3taonline.com/preview
This tag does not work on
"sites.google.com". I have a site, but it's not working.
my site: http://sites.google.com/site/infosafiul/
This was brilliant! Solved an annoying problem with footer design I had!
Amazing!! So adaptable!! Thank you soooo much!
thank u purna
thank u
Post a Comment