Logo Design using pure CSS

Question

So I have seen some really cool things made using CSS and seen some peoples website logo's completed in pure CSS, no images.

I really want to understand how its done, I have drawn out a logo I was going to attempt to redesign using CSS but realized how hard it really is! So to help me understand it a little bit more could someone correct my code so I can understand how its done!

Any help is appreciated :) Thanks.

(p.s awful coding but you can see where I was coming from?)

This is a quick sketch of what I wanted to achieve

#logotop{
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background:green;
}
#logobottom{
	overflow: hidden;
     height:45px;
     width:45px;
	 -webkit-border-radius: 0 0 0 150px;
    -moz-border-radius: 0 0 0 150px;
    border-radius: 0 0 0 150px;
	
     background:green;
	 -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);

	 margin-left: auto ;
  	margin-right: auto ;
}
#logocenter{
	overflow: hidden;
	position: relative;
     height:55px;
     width:55px;
     border-radius: 90px 90px 90px 90px;
     -moz-border-radius: 90px 90px 90px 90px ;
     -webkit-border-radius: 90px 90px 90px 90px ;
     background:white;
	 margin-top: -72px;
	 margin-left: auto ;
  	margin-right: auto ;
}
#logocenter2{
	overflow: hidden;
	position: relative;
     height:25px;
     width:25px;
     border-radius: 90px 90px 90px 90px;
     -moz-border-radius: 90px 90px 90px 90px ;
     -webkit-border-radius: 90px 90px 90px 90px ;
     background:green;
	 margin-top: -40px;
	 margin-left: auto ;
  	margin-right: auto ;
	
}
#content{
	height: 90px;
	width: 90px;
	background-color: white;
	
}

<div id="content">
<div id="logotop">
</div>
<div id="logobottom">
</div>
<div id="logocenter">
</div>
<div id="logocenter2">
</div>
</div>

Answer 1

online there is a lot of img to css convertor like THIS, but you should make a good quality image and try to convert it.

The convetor that I've just suggested to you use a pixel-for-pixel whit a table like that:

<table cellpadding=0 cellspacing=0 height=50 width=50 style="font-size:0px;height:50;width:50">
  <tr>
    <td>
      <table cellpadding=0 cellspacing=0 height=50 width=50 style="font-size:0px;height:50px;width:50px">
        <tr height=0>
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
          <td width=1 />
        </table

DEMO

Answer 2

It's not easy to explain because there's no "exact rules" to explain. You can use a tool such like paolobasso's one, but it's a pixel-based tool that just recreate by a matrix (table -> cell) an image.

What are you talking about instead it's a decomposition of a figure in N rectagles.

Each rectangle

• it's positioned with margins (example: margin-left: auto, margin-right: auto means "centered") and flow (position attribute).

• It's colored by background property.

• It's dimensioned by width and height.

• It's shaped (curved) by border-radius and similiar to decline to each browser (es: moz-border-radius)

• it's shaped and dimensioned by rotation in degree (transform: rotate(315deg))

So, by hand, it's difficoult to do such things, but if you want to understand you have to study something like OpenGL and not pure css, principles are the same used for 2D graphics, anyway there's nothing much more to say about, rest it's all about css flux and flow to let your "rectangles" stay togheter and stay at correct distance. Often you'll need some overlapping and, if you have a lot of colors (imagine a button over a shirt) to manage also css z-index property.