Tiger Bird Webdesign: CSS Flower

CSS Flower
Let flowers bloom with CSS!

The basic structure of the petals are made with 10 div elements. The unique shape of a petal is created by CSS border-top-left-radius and border-bottom-right-radius. The greater the value the rounder the corner gets.
HTML & CSS Code


<!Doctype html>
<html>
<head>
<style>
#one
{position:absolute;
top:100px;
left:200px;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;}

#two
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(30deg);\
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(30deg);
-webkit-transform-origin:left bottom;
transform:rotate(30deg);
transform-origin:left bottom;}


#three
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(60deg);
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(60deg);
-webkit-transform-origin:left bottom;
transform:rotate(60deg);
transformt-origin:left bottom;}


#four
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(90deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(90deg);
-webkit-transform-origin:left bottom;
transform:rotate(90deg);
transformt-origin:left bottom;}

#five
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(120deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(120deg);
-webkit-transform-origin:left bottom;
transform:rotate(120deg);
transformt-origin:left bottom;}


#six
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(150deg);
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(150deg);
-webkit-transform-origin:left bottom;
transform:rotate(150deg);
transformt-origin:left bottom;}


#seven
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(180deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(180deg);
-webkit-transform-origin:left bottom;
transform:rotate(180deg);
transform-origin:left bottom;}


#eight
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(210deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(210deg);
-webkit-transform-origin:left bottom;
transform:rotate(210deg);
trasform-origin:left bottom;}


#nine
{position:relative;
height:80px;
width:50px;
top:20px;
left:20px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(30deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(30deg);
-webkit-trasform-origin:left bottom;
transform:rotate(30deg);
trasform-origin:left bottom;}



#ten
{position:relative;
left:5px;
height:80px;
width:50px;
left:-5px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(60deg);
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(60deg);
-webkit-transform-origin:left bottom;
transform:rotate(60deg);
transform-origin:left bottom;
}


#circle
{position:absolute;
border-color:orange;
border-style:solid;
border-width:2px;
width:50px;
height:50px;
top:170px;
left:175px;
border-radius:50%;
background-color:yellow;
}

</style>

</head>
<body>

<div id="one">
<div id="two">
<div id="three">
<div id="four">
<div id="five">
<div id="six">
<div id="seven">
<div id="eight">
<div id="nine">
<div id="ten">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="circle">
</div>
</div>

</body>
</html>
Tiger Bird Webdesign

Thursday, 27 November 2014

CSS Flower

HTML & CSS Code

No comments:

Post a Comment
