Tiger Bird Webdesign: Circles, Circles, Circles

Wednesday, 5 November 2014

Circles, Circles, Circles

EURO

The border-radius CSS property allows you to make round shapes.
This time, I've used several round shapes to design a coin.

HTML

Inside the largest outside circle which has the "id="outside_outside_one_euro"" in the div element
are 2 more smaller circles which are labelled as "id="outside_one_euro"" and "id="inside_one_euro"".The smallest circle includes "1 EURO" put in separate div elements.

CSS

border-radius:50% is applied to all div elements to create circles.
If you want to round the borders just a little bit you can use different px values.

HTML & CSS Code Together

<!Doctype Html>

<html>

<head>
<title>Circles, Circles, Circles</title>

<style>


#box
{position:relative;
width:300px;
height:400px;
}

#text
{position:raltive;
top:20px;
}

#outside_outside_one_euro
{position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:#B2994C;
border-style:outset;
border-width:2px;
border-color:#E8BF19;
border-radius:50%;
background: -webkit-linear-gradient(45deg, white, #B2994C);
background: -o-linear-gradient(45deg, white, #B2994C);
background: -mox-linear-gradient(45deg, white, #B2994C);
background: linear-gradient(90deg, white, #B2994C);
}


#outside_one_euro
{position:relative;
top:10px;
left:10px;
width:180px;
height:180px;
background-color:#D1C294;
border-width:2px;
border-color:#CC9900;
border-style:ridge;
border-radius:50%;
background: -webkit-linear-gradient(90deg, white, #D1C294);
background: -o-linear-gradient(90deg, white, #D1C294);
background:-mox-linear-gradient(90deg, white, #D1C294);
background: linear-gradient(90deg, white, #D1C294);
}

#inside_one_euro
{position:relative;
top:20px;
left:20px;
width:140px;
height:140px;
background-color:gray;
border-width:1px;
border-style:inset;
border-color:gray;
border-radius:50%;
background: -webkit-linear-gradient(45deg, white, gray);
background: -o-linear-gradient(45deg, white, gray);
background: -mox-linear-gradient(45deg, white, gray);
background: linear-gradient(45deg, white, gray);
}



#one
{position:relative;
top:-10px;
left:10px;
width:100px;
height:100px;
font-size:900%;
font-style:italic;
color:#E0E0E0;
text-shadow:1px 1px 0px black;
}

#euro
{position:relative;
top:-30px;
left:80px;
width:50px;
height:50px;
font-size:150%;
color:#E0E0E0;
text-shadow:1px 1px 0px black;
}



</style>

<script></script>

</head>


<body>

<div id="box">

<div id="outside_outside_one_euro">
<div id="outside_one_euro">
<div id="inside_one_euro"> 

<div id="one">1</div>
<div id="euro">EURO</div>

</div>
</div>
</div>

</div>

<div id="text">

</div>


</body>


</html>

Tiger Bird Webdesign

Wednesday, 5 November 2014

Circles, Circles, Circles

HTML

CSS

HTML & CSS Code Together

No comments:

Post a Comment