Long gone is the day when you require images to create circles and items in circles. We will create a simple circle now.
Just like if we were making a square or rectangle using a div, we declare a width, height, and background color. Of course things like Borders and padding are optional still.
Lets create our first circle:
In the code above, it is the border-radius that turns the square into a nice circle.
However, by adding a few more properties we can turn it into quite a nice circle.
Now by adding some HTML and Javascript (onclick), we can make it into a link to OCN!
TO SEE THE FINISHED ARTICLE ON JS FIDDLE: http://jsfiddle.net/rHCPa/
I hope these guides are helping some people.
Just like if we were making a square or rectangle using a div, we declare a width, height, and background color. Of course things like Borders and padding are optional still.
Lets create our first circle:
Code:
.circle
{
width: 200px;
height: 200px;
background-color: #eeeeee;
border-radius: 50%;
}
In the code above, it is the border-radius that turns the square into a nice circle.
However, by adding a few more properties we can turn it into quite a nice circle.
Code:
.circle
{
width: 200px;
height: 200px;
background-color: #eeeeee;
border-radius: 50%;
padding: 5px;
text-align: center;
line-height: 200px;
color: white;
font-family: arial, serif;
font-size: 30px;
}
.circle:hover
{
background-color: #575757;
mouse: pointer;
}
Now by adding some HTML and Javascript (onclick), we can make it into a link to OCN!
Code:
<!doctype html>
<html lang="en">
<head>
<title>Overclock.net link</title>
<style type="text/css">
.circle
{
width: 200px;
height: 200px;
background-color: #eeeeee;
border-radius: 50%;
padding: 5px;
text-align: center;
line-height: 200px;
color: white;
font-family: arial, serif;
font-size: 30px;
}
.circle:hover
{
background-color: #575757;
mouse: pointer;
}
</style>
</head>
<body>
<div class="circle" onclick="window.location='http://www.overclock.net';">
Overclock.net
</div>
</body>
</html>
TO SEE THE FINISHED ARTICLE ON JS FIDDLE: http://jsfiddle.net/rHCPa/
I hope these guides are helping some people.
Main Rig.
(14 items) | 
Battlefield 2 review.
Battlefield 2 PC Game EA |
|
Main Rig.
(14 items) |
Battlefield 2 review.
Battlefield 2 PC Game EA |
