CSS3 Logo Design
Wall Script
Wall Script
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
 
Email  : ravi8x[at]gmail.com

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;
}
web notification

75 comments:

  1. TeeZonkJanuary 23, 2012 at 3:08 AM

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

    ReplyDelete
  2. AnonymousJanuary 23, 2012 at 3:54 AM

    cool :)

    ReplyDelete
  3. AutomaxzJanuary 23, 2012 at 5:07 AM

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

    ReplyDelete
  4. AnonymousJanuary 23, 2012 at 7:09 AM

    nice

    ReplyDelete
  5. lazaacJanuary 23, 2012 at 7:15 AM

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

    ReplyDelete
  6. AnonymousJanuary 23, 2012 at 7:15 AM

    IE issue for CSS3

    ReplyDelete
  7. mohamedJanuary 23, 2012 at 7:24 AM

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

    ReplyDelete
  8. ngash2January 23, 2012 at 7:31 AM

    good tut

    ReplyDelete
  9. Roy VincentJanuary 23, 2012 at 7:43 AM

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

    ReplyDelete
  10. UnknownJanuary 23, 2012 at 7:46 AM

    great!! amazing

    ReplyDelete
  11. shree@SOFTECHNOGEEKJanuary 23, 2012 at 7:48 AM

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

    ReplyDelete
  12. AnonymousJanuary 23, 2012 at 8:05 AM

    Its cool, because IE wont support any of this haha

    ReplyDelete
  13. Ali EmreJanuary 23, 2012 at 8:13 AM

    Simple and effective. Thanks for that

    ReplyDelete
  14. Darshil ShahJanuary 23, 2012 at 8:25 AM

    nice!!really like it!!

    ReplyDelete
  15. JohnsonJanuary 23, 2012 at 10:58 AM

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

    Greetz!

    ReplyDelete
  16. VitautJanuary 23, 2012 at 11:04 AM

    Very Cool///

    ReplyDelete
  17. Dinesh VermaJanuary 23, 2012 at 11:16 AM

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

    ReplyDelete
  18. Hedy™January 23, 2012 at 11:18 AM

    this is great..

    ReplyDelete
  19. AnonymousJanuary 23, 2012 at 4:26 PM

    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
  20. AnonymousJanuary 23, 2012 at 5:54 PM

    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
  21. ChethiJanuary 24, 2012 at 12:42 AM

    in ie6 it is not coming correct.

    ReplyDelete
  22. JeroenJanuary 24, 2012 at 2:51 AM

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

    ReplyDelete
  23. lEaNsErJanuary 24, 2012 at 11:22 AM

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

    ReplyDelete
  24. SelenITJanuary 24, 2012 at 1:09 PM

    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
  25. utreeJanuary 24, 2012 at 11:15 PM

    good work dude

    ReplyDelete
  26. NimsrulesJanuary 26, 2012 at 6:27 AM

    Wonderful article for learning advanced CSS.

    ReplyDelete
  27. AnonymousJanuary 27, 2012 at 1:03 AM

    Nice

    ReplyDelete
  28. PSD To WordpressJanuary 27, 2012 at 1:38 AM

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

    ReplyDelete
  29. macoy23January 27, 2012 at 1:43 AM

    Nice :)

    ReplyDelete
  30. Jeet GillJanuary 29, 2012 at 6:08 AM

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

    ReplyDelete
  31. song.loverJanuary 31, 2012 at 12:46 PM

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

    ReplyDelete
  32. Logo DesignFebruary 3, 2012 at 12:34 AM

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

    ReplyDelete
  33. Animesh KumarFebruary 3, 2012 at 11:07 AM

    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
  34. AnonymousFebruary 4, 2012 at 4:09 AM

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

    ReplyDelete
  35. Paul SantoshFebruary 5, 2012 at 6:20 AM

    Great tutorial!

    ReplyDelete
  36. AshishFebruary 14, 2012 at 12:21 AM

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

    ReplyDelete
  37. Save Money IndiaMarch 1, 2012 at 1:14 AM

    lol so hard!

    ReplyDelete
  38. KliklijstMarch 7, 2012 at 5:11 AM

    Totally agree!

    ReplyDelete
  39. DanielMarch 20, 2012 at 6:53 AM

    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
  40. Logo DesignApril 14, 2012 at 3:27 AM

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

    ReplyDelete
  41. Nanang GunawanMay 6, 2012 at 11:27 AM

    Exciting :)

    ReplyDelete
  42. samJune 13, 2012 at 11:03 AM

    really nice.

    ReplyDelete
  43. PrashantJune 19, 2012 at 2:33 PM

    such awesome i cant believe it ... great

    ReplyDelete
  44. AnonymousJuly 19, 2012 at 4:51 AM

    to good

    ReplyDelete
  45. cae pennaAugust 23, 2012 at 9:10 AM

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

    ReplyDelete
  46. UnknownSeptember 15, 2012 at 7:14 AM

    nice..............

    ReplyDelete
  47. UnknownSeptember 15, 2012 at 7:14 AM

    nice.........

    ReplyDelete
  48. SonamOctober 11, 2012 at 5:16 AM

    Very nice.thanks for sharing it.

    ReplyDelete
  49. Best Offers IndiaDecember 11, 2012 at 2:39 AM

    Nice. thanks for sharing

    ReplyDelete
  50. AnonymousJanuary 3, 2013 at 1:54 PM

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

    ReplyDelete
  51. AnonymousJanuary 26, 2013 at 5:18 PM

    wow... excellent Srinivas :) !

    ReplyDelete
  52. Website DesignFebruary 6, 2013 at 5:00 AM

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

    ReplyDelete
  53. My KnowledgeFebruary 25, 2013 at 2:28 AM

    nice ravi :)

    ReplyDelete
  54. NehaMarch 3, 2013 at 4:30 PM

    Nice tutorial, you saved my day.

    ReplyDelete
  55. Neeraj SharmaMarch 13, 2013 at 12:23 AM

    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
  56. UnknownMarch 21, 2013 at 4:02 AM

    buce tutorial\

    ReplyDelete
  57. Hot Indian DealzAugust 28, 2013 at 2:28 PM

    Like this.

    ReplyDelete
  58. UnknownAugust 29, 2013 at 8:22 AM

    nice tutorial

    ReplyDelete
  59. UnknownAugust 29, 2013 at 8:23 AM

    nice tutorial

    ReplyDelete
  60. UnknownOctober 31, 2013 at 6:25 AM

    Great post !
    Thanks for this article.

    ReplyDelete
  61. Sandeep kumarOctober 31, 2013 at 6:28 AM

    I really like it.

    ReplyDelete
  62. Anil KumarDecember 23, 2013 at 11:13 PM

    This is really awesome post..

    ReplyDelete
  63. Nitin PatelFebruary 27, 2014 at 12:26 AM

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

    Thanks buddy

    ReplyDelete
  64. Promac PromosMarch 25, 2014 at 3:54 AM

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

    ReplyDelete
  65. Tulasirao lankeApril 19, 2014 at 3:29 PM

    cool intersting

    ReplyDelete
  66. MonikaAugust 24, 2014 at 10:34 PM

    Really very cool and awesome designs. Thanks for sharing.

    ReplyDelete
  67. BachatmelaSeptember 5, 2014 at 1:16 PM

    Good Job ... Awesome Design

    ReplyDelete
  68. offerduniaJanuary 4, 2015 at 7:41 AM

    awesome job i really liked it..

    ReplyDelete
  69. UnknownMay 16, 2015 at 4:01 PM

    Wow Great Job

    ReplyDelete
  70. DealdimerJune 11, 2015 at 2:12 PM

    very cool and awesome designs. Thanks for sharing.

    ReplyDelete
  71. Sunil KumarJune 29, 2015 at 12:14 PM

    This is really awesome article with cool logo designs.

    ReplyDelete
  72. EntireboxAugust 7, 2015 at 2:52 PM

    Superb Article.. I Loved It...

    ReplyDelete
  73. RajeshartyaDecember 16, 2015 at 6:10 AM

    nice thanks

    ReplyDelete
  74. UnknownJuly 15, 2016 at 5:57 AM

    his is really awesome article with cool logo designs.

    ReplyDelete
  75. UnknownApril 14, 2017 at 1:50 PM

    Thanks, really informative

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X