I am here to demonstrate "How to create a logo with css." .

I have described you the way to draw circle with CSS in my previous blog post. Now i am describing you to design a logo with same technique.

The CSS

  div.circleored {
 width: 30px;
 height: 30px;
 background: red;
 border-radius: 28px;
 -moz-border-radius: 28px;
 -webkit-border-radius: 28px;
 filter:alpha(opacity=54);
 -moz-opacity:0.54;
 -khtml-opacity: 0.54;
 opacity: 0.54;
 display: block;
 position: fixed;
 top:10;
 left:20;
}

div.circleblue {
 width: 30px;
 height: 30px;
 background: blue;
 border-radius: 28px;
 -moz-border-radius: 28px;
 -webkit-border-radius: 28px;
 filter:alpha(opacity=54);
 -moz-opacity:0.54;
 -khtml-opacity: 0.54;
 opacity: 0.54;
 display: block;
 position: fixed;
 top:30;
}
div.circlegreen {
 width: 30px;
 height: 30px;
 background: green;
 border-radius: 28px;
 -moz-border-radius: 28px;
 -webkit-border-radius: 28px;
 filter:alpha(opacity=54);
 -moz-opacity:0.54;
 -khtml-opacity: 0.54;
 opacity: 0.54;
 display: block;
 position: fixed;
 top:30;
 left:30;
}

The Html

<div class='circleored' ></div>
<div class='circleblue' ></div>
<div class='circlegreen' ></div>

The Result

Related post
Draw circle with css.