CSS3 Logo Design

now we can design almost anything using the power of CSS3. Designing logos and icons using Cascading Style Sheets

will make your site load faster than using images. Today i am going discuss how to design CSS3 logo using basic properties.

Designing CSS3 logo is very easy and needs perfect planning in laying out html elements. In this tutorial i am taking an example of below logo. Also please not that CSS3 properties are not supported by all browsers. Currently all major browsers like Chrome, Safari and Firefox are supporting. For the best result please check the demo in Chrome or Safari (latest versions).

Basic CSS3 Properties

To design this logo i used two main CSS3 properties.

1. border-radius:

If you observe i have rounded corners for head, wings and some other places. For rounding corners i used css3 border-radius property.

This property will take two values. First value will be horizontal radius and second value will be vertical radius.

2. Transform:

CSS3 transform property will accept lot of values like skew, rotate, translate, matrix etc., But i am using rotate property as it required to design this logo. If you observe, the lower left and lower right wings are rotated. For that i used transform: rotate(x degrees) property.

Designing the Logo

To design this logo i used all div container and applied some css properties. I divided complete logo into separate parts like head, body, wings and tail. I will explain one by one with HTML and CSS. Below i gave a simple picture which will give an idea about the structure of logo.

A. Designing the Head: To design head i used all div containers. Below is html and css for head section. I used css3 border-radius property to make head with curved shape.

HTML:

<div class="head">
<div class="ant ant_left"></div>
<div class="ant ant_right"></div>
<div class="lefteye"></div>
<div class="righteye"></div>
</div> 

CSS:

 

#logo .head{
position: relative;
height: 40px;
background: #bdd73c;
border-radius:60px 60px 0 0 / 50px 50px 0 0;
border: 2px solid #6fb74d;
}
.head .ant{
width: 2px;
height: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
position: absolute;
border-radius: 3px 3px 0 0;
border-bottom: 2px solid #bdd73c;
}
.head .ant_left{
top: -22px;
left: 15px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.head .ant_right{
top: -22px;
left: 73px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.lefteye, .righteye{
position: absolute;
background: #fff;
border: 2px solid #6fb74d;
width: 10px;
height: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
top: 15px;
}
.lefteye{
left: 20px;
}
.righteye{
left: 65px;
} 

and below is output of head

B. Designing the Body: For designing the body i used following html and css.

HTML

<div class="body">
<div class="strip brown"></div>
<div class="strip"></div>
<div class="strip brown"></div>
<div class="strip"></div>
<div class="strip brown"></div>
<div class="strip last"></div>

CSS

#logo .body{
overflow: hidden;
border: 2px solid #6fb74d;
margin-top: 4px;
border-radius: 0 0 60px 60px;
}
#logo .body .strip{
height: 18px;
background: #bdd73c;
}
#logo .body .brown{
height: 22px;
background: #5a4a42;
} 

and the output of body look like below

C. Designing the Wings: For designing wings i used transform: rotate() property.

HTML

<div class="left_wings">
<div class="wing1"></div>
<div class="wing2"></div>
</div>
<div class="right_wings">
<div class="wing1"></div>
<div class="wing2"></div>
</div> 

Css

.left_wings .wing1,
.left_wings .wing2{
width: 100px;
background: #e2e2e3;
border: 2px solid #d1d0d1;
border-radius:16px 0 0 16px;
position: absolute;
}
.left_wings .wing1{
height: 35px;
top: 48px;
left: 0;
z-index: -1;
opacity: .8;
}
.left_wings .wing2{
top: 80px;
left: 20px;
z-index: -1;
opacity: .6;
height: 25px;
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(45deg);
}
.right_wings .wing1,
.right_wings .wing2{
width: 100px;
background: #e2e2e3;
border: 2px solid #d1d0d1;
border-radius:0 16px 16px 0;
position: absolute;
}
.right_wings .wing1{
height: 35px;
top: 48px;
left: 200px;
z-index: -1;
opacity: .8;
}
.right_wings .wing2{
top: 80px;
left: 175px;
z-index: -1;
opacity: .6;
height: 25px;
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
} 

and the output of wings is

D. Designing the Tail: Below is html and css for tail section

HTML

<div class="tail">
<div class="tail_left"></div>
<div class="tail_right"></div>
</div> 

Css

.tail{
width: 16px;
height: 40px;
left: 143px;
margin-top: -1px;
position: absolute;
background: #6fb74d;
}
.tail_left{
width: 8px;
height: 40px;
background: #fff;
float: left;
border-top-right-radius:16px 40px;
}
.tail_right{
width: 8px;
height: 40px;
background: #fff;
float: left;
border-top-left-radius:16px 40px;
} 

finally tail output is

The final HTML and CSS

HTML

<body>
<div id="logo_container">
<div id="logo">
<div class="head">
<div class="ant ant_left"></div>
<div class="ant ant_right"></div>
<div class="lefteye"></div>
<div class="righteye"></div>
</div>
<div class="body">
<div class="strip brown"></div>
<div class="strip"></div>
<div class="strip brown"></div>
<div class="strip"></div>
<div class="strip brown"></div>
<div class="strip last"></div>
</div>
<div class="left_wings">
<div class="wing1"></div>
<div class="wing2"></div>
</div>
<div class="right_wings">
<div class="wing1"></div>
<div class="wing2"></div>
</div>
<div class="tail">
<div class="tail_left"></div>
<div class="tail_right"></div>
</div>
</div>
</div>
</body> 

Css

body{
width: 100%;
margin: 0;
padding: 0;
}
#logo_container{
width: 300px;
height: 200px;
margin: 0 auto;
position: relative;
margin-top: 100px;
}
#logo{
width: 100px;
margin-left: 100px;
}
#logo .head{
position: relative;
height: 40px;
background: #bdd73c;
border-radius:60px 60px 0 0 / 50px 50px 0 0;
border: 2px solid #6fb74d;
}
.head .ant{
width: 2px;
height: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
position: absolute;
border-radius: 3px 3px 0 0;
border-bottom: 2px solid #bdd73c;
}
.head .ant_left{
top: -22px;
left: 15px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.head .ant_right{
top: -22px;
left: 73px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.lefteye, .righteye{
position: absolute;
background: #fff;
border: 2px solid #6fb74d;
width: 10px;
height: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
top: 15px;
}
.lefteye{
left: 20px;
}
.righteye{
left: 65px;
}
#logo .body{
overflow: hidden;
border: 2px solid #6fb74d;
margin-top: 4px;
border-radius: 0 0 60px 60px;
}
#logo .body .strip{
height: 18px;
background: #bdd73c;
}
#logo .body .brown{
height: 22px;
background: #5a4a42;
}
.left_wings .wing1,
.left_wings .wing2{
width: 100px;
background: #e2e2e3;
border: 2px solid #d1d0d1;
border-radius:16px 0 0 16px;
position: absolute;
}
.left_wings .wing1{
height: 35px;
top: 48px;
left: 0;
z-index: -1;
opacity: .8;
}
.left_wings .wing2{
top: 80px;
left: 20px;
z-index: -1;
opacity: .6;
height: 25px;
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(45deg);
}
.right_wings .wing1,
.right_wings .wing2{
width: 100px;
background: #e2e2e3;
border: 2px solid #d1d0d1;
border-radius:0 16px 16px 0;
position: absolute;
}
.right_wings .wing1{
height: 35px;
top: 48px;
left: 200px;
z-index: -1;
opacity: .8;
}
.right_wings .wing2{
top: 80px;
left: 175px;
z-index: -1;
opacity: .6;
height: 25px;
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.tail{
width: 16px;
height: 40px;
left: 143px;
margin-top: -1px;
position: absolute;
background: #6fb74d;
}
.tail_left{
width: 8px;
height: 40px;
background: #fff;
float: left;
border-top-right-radius:16px 40px;
}
.tail_right{
width: 8px;
height: 40px;
background: #fff;
float: left;
border-top-left-radius:16px 40px;
} 

Cheers :D