CSS3 Logo Design
Wall Script
Follow Me:
Monday, January 23, 2012

CSS3 Logo Design

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.

CSS3 Logo Design


Download Script     Live Demo

Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info

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)

CSS3 Logo androidhive

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.

CSS3 border radius border-radius

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.

CSS3 transform

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.

CSS3 Logo Sketch

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
CSS3 logo 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>
</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
CSS3 logo head

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
CSS3 logo head

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
CSS3 logo head
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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


74 comments:

  1. better if you put nth-child(odd/even) for the body stripes, right?

    ReplyDelete
  2. I Think this is only to sharpening our CSS skils, not to apply in real project, cause it's really not efficient.

    ReplyDelete
  3. awesome! i'm gonna practice with it.. cool!

    ReplyDelete
  4. IE issue for CSS3

    ReplyDelete
  5. Yeah I agree with Automaxz images would be more efficient, but i didn't imagine i can do that with css3

    ReplyDelete
  6. so cool! but still im prepared with image than this... but its a good practice to enhance the css skill as automax said :)

    ReplyDelete
  7. with this basic idea we can do any logo like google,bing ?

    ReplyDelete
  8. Its cool, because IE wont support any of this haha

    ReplyDelete
  9. Simple and effective. Thanks for that

    ReplyDelete
  10. Stop Designing, Srinivas ;-) You're better in programming, much better! I love your nice Tuts about API, jQuery and Stuff.

    Greetz!

    ReplyDelete
  11. Why don't you use disqus comment box for your blog.

    ReplyDelete
  12. Lame article. Speed is not everything. A logo should be visible even WITHOUT CSS, and the nested divs are just retarded. Use elements like they are meant to...

    All harshness aside, this is pretty good work. I just don't think this is a good way to implement the logo. :)

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

    you can still achieve the same effect using repeating-linear-gradient


    background: -moz-repeating-linear-gradient(top, #5a4a42, #5a4a42 18px, #bdd73c 18px, #bdd73c 40px );
    background: repeating-linear-gradient(top, #5a4a42, #5a4a42 18px, #bdd73c 18px, #bdd73c 40px );
    background: -webkit-repeating-linear-gradient(top, #5a4a42, #5a4a42 18px, #bdd73c 18px, #bdd73c 40px );

    ReplyDelete
  14. in ie6 it is not coming correct.

    ReplyDelete
  15. Your left wing2 is wrong side around, because you only changed rotation for webkit tot -45deg

    ReplyDelete
  16. :O!!! good sample!!! i need CSS3!! xD but in explorers how IE & FF 8 not work :/

    ReplyDelete
  17. Seems to have too much markup for such a simple shape. All browsers that support CSS3 effects also support pseudo-elements ::before/::after. So the main part of the shape can be created with just two HTML elements: http://jsfiddle.net/Gw5bQ/6/

    ReplyDelete
  18. Wonderful article for learning advanced CSS.

    ReplyDelete
  19. This is really great post very inspiring ,Appreciate it for sharing this useful tut here with us.

    ReplyDelete
  20. simple way to use it, just make image of this html css logo. Then use it over any browser that dnt support css3.

    ReplyDelete
  21. Thanks for sharing such awesome post, but does IE support this ??

    ReplyDelete
  22. Wow! Awesome its look so creative and i like to design this type of logo.

    ReplyDelete
  23. Your tutorials are just awesome. I like them very much..
    Especially the Jquery and CSS3 based tutorials and give all the credits to you for what i have learnt till now

    ReplyDelete
  24. Why would you EVER use IE?! Dont be stupid, get Chrome.

    ReplyDelete
  25. seems nice. it's great to create a logo with css3 but using an image is better for SEO purpose...

    ReplyDelete
  26. i think it's more efficient to use a png as logo than this, also i think the whole CSS code takes more space than an actual image.
    But, this is not a comparison with an image so i must say, well done mate, it is a cool way of showing the posibilities of CSS3 :)

    ReplyDelete
  27. Amazing and such a great source of learning material.. I love to read it.. Keep it up..

    ReplyDelete
  28. such awesome i cant believe it ... great

    ReplyDelete
  29. i did something similiar with homer simpson's face at http://www.caepenna.com/homer

    ReplyDelete
  30. Very nice.thanks for sharing it.

    ReplyDelete
  31. awesome look i m using corel draw currently buy must want to give a try to css

    ReplyDelete
  32. wow... excellent Srinivas :) !

    ReplyDelete
  33. Great...i make first logo of my life that too on CSS3.

    ReplyDelete
  34. Nice tutorial, you saved my day.

    ReplyDelete
  35. Awesome Tutorials helped me a lot in designing LOGO although i haven;t able to design a decent one till now but the tutorial is really helpfull

    ReplyDelete
  36. Wow! Detailed tutorials! I literally pushed my head on many other lessons on the net by my search ended here!

    Thanks buddy

    ReplyDelete
  37. So cool ! But still im prepared with image than this... but its a good practice to enhance the css skill as automax said :)

    ReplyDelete
  38. Really very cool and awesome designs. Thanks for sharing.

    ReplyDelete
  39. very cool and awesome designs. Thanks for sharing.

    ReplyDelete
  40. This is really awesome article with cool logo designs.

    ReplyDelete
  41. Superb Article.. I Loved It...

    ReplyDelete
  42. his is really awesome article with cool logo designs.

    ReplyDelete

Make in India