Back then we used graphic design softwares like photoshop to design logos and icons. But 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.

Ravi Tamada

Designer Developer & Freelance

Chennai, INDIA

androidhive.info Designer DeveloperFreelanceChennai, INDIA

Basic CSS3 Properties

Designing the 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>

#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;

}

<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>

#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;

}

<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>

.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);

}

<div class=" tail ">

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

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

</div>

.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;

}

The final HTML and CSS

<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>

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;

}

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 likeandare supporting. For the best result please check the demo in Chrome or Safari (latest versions)To design this logo i used two main CSS3 properties.If you observe i have rounded corners for head, wings and some other places. For rounding corners i used css3property.This property will take two values. First value will beand second value will beCSS3 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 usedproperty.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.To design head i used all div containers. Below is html and css for head section. I used css3property to make head with curved shape.and below is output of headFor designing the body i used following html and css.and the output of body look like belowFor designing wings i usedproperty.and the output of wings isBelow is html and css for tail sectionfinally tail output is