CSS3 can be used to draw simple design elements like square, circles etc. Previously web designer use Photoshop images and JavaScript to do this work but CSS3 properties has made it easy to create circles. Circles created using CSS are extremely fast loading than images.
So I am starting this short tutorials which will tell you how to use border-radius property and draw a circle in no time.
HTML Part:
Just create two div blocks with classes .container and .create-circles
CSS3 Part:
How to create a Square Using Simple CSS
First assign values to height, width and background color properties.
.create-circles
{
height:200px;
width:200px;
background-color:#FF0000;
}
{
height:200px;
width:200px;
background-color:#FF0000;
}
The above code will create a fine square square of red color. You can change the property values according to yourself.
Demo
.jpg)
Border-Radius Property:
Now to change the shape of this square we will use CSS3 border-radius property. This property create round corners on the edges of square. If i give 60px value to border radius property square with rounded corner will now look like this.
.jpg)
Make Complete Circle
To make this a complete circle. give 100px value to property. It will create a perfect shape circle. The value of border radius to create
circle depends on the height and width of the div container. You should
change the value till your square becomes circle
border-radius:100px;
.jpg)
Since it is CSS3. It may be possible that the circle won't show up on all web browsers
Solution to browser compatibility issue
For our CSS circle to show up on all web browsers add these two lines in CSS
-moz-border-radius:100;
-webkit-border-radius:100px;
-webkit-border-radius:100px;
Final Complete Code:
Since this tutorials is for CSS beginner so here is how final code will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create Circles</title>
<style media="all" type="text/css">
.create-circles
{
height:200px;
width:200px;
background-color:#FF0000;
You can also write CSS in external page or with in body with script tag
For More tutorials and latest post updates. Subscriber to our feed click here<html>
<head>
<meta charset="utf-8">
<title>Create Circles</title>
<style media="all" type="text/css">
.create-circles
{
height:200px;
width:200px;
background-color:#FF0000;
-moz-border-radius:100;
-webkit-border-radius:100px;
border-radius:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="create-circles">
</div>
</div>
</body>
</html>
-webkit-border-radius:100px;
border-radius:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="create-circles">
</div>
</div>
</body>
</html>
.jpg)
.jpg)
.jpg)
.jpg)
.png)
3 comments:
Html and php is very nice. thanks for very informative post share with us i m very like it it si very useful for my work in post your content are too good i appreciate your post and your words
cheap custom wristbands
It is really great i read this article you have on this blog thank you for sharing it!!!
cheap custom wristbands
good work. thanks
Post a Comment