CSS3 Logo Design

[Fi8sVrs]

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.

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.

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

<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

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

<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

<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

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

src CSS3 Logo Design

[quitevicious]

SI utilitatea cat la suta e? sa vad eu cati vor face asta. Sincer imi pare dragut ca o chestie asa dar ca utilitate este zero.

[3mstek]

Si eu la inceput am incercat sa fac un logo manual, dar e mai simplu daca il faci direct din photoshop si dupa il asezi tu dupa bunul plac .

Oricum , interesanta musca-albina-android-ul

[Greenbytes]

Foarte interesant, nu stiam cã se poate asa ceva dar trebuie sã stii ceva CSS3 ca sã poti face ce logo vrei tu...

Si siteul este interesant, multumesc pentru link.

[WarLord]

Am gasit Logo Maker cu template-uri pe torenti. Oricum, apreciez postul.

[Cheater]

Cea mai buna solutie este sa ai cat mai putine poze in site, anume sa faci 99% din grafica din css, astfel scazi mult timpul de incarcare si cresti in ochii google.

[ecou]

Fiind nou pe aici acum am vazut acest tutorial ... e foarte bun si chiar ma gandeam acum vreo 2 saptamani ce bine ar fi daca ar merge sa rotesc cumva acele chenare in CSS

O intrebare pentru cei ce vor sa ajute: acel border-radius creeaza un semicerc spre exteriorul acelui div ... SE POATE sa-l creeze si spre interior ? adica in loc de "(" in partea stanga sa fie ")" umplutura de culoare background si apoi "(" spre celalalt exterior !!! Altfel spus nu sa traga cineva de maini un div ci sa-i bage pumnii la coaste sa se indoaie

ATENTIE: stiu ca nu stau foarte bine cu exprimare iar in caz de ceva voi atasa poze

ATENTIE 2: stiu css cat sa ma descurc nu la nivel profesionist deci nu aruncati cu injuraturi si pietre

[malsploit]

Nu cred ca merge cum zici tu.Poti sa faci un div care sa foloseasca proprietatea border-radius a diviziunilor apropriate.

Uita-te pe aici: CSS Backgrounds and Borders Module Level 3

Oricum se pot face lucruri extraordinare cu css3: lab | simurai

[ecou]

Multumesc ak4d3a. Intre timp mi-a trasnit ideea ca atunci cand dau nr de pixeli pentru border-radius sa incerc cu -10px spre ex sa vad ce se intampla momentan nu am timp ma preocupa altele dar voi reveni probabil cu intrebari in alt topic pentru a primi ajutor

Dupa ce termin micutul proiect la care ma chinui o sa va arat rezultatele

[AlStar]

Pentru cel care vroia curbura inversa:

Fa 3 divuri:

- in mijloc

- 2 laterale, deasupra celui din mijloc, avand border radius si background-ul elementului parinte.

[ar trebui sa mearga]

Si-n legatura cu Logo Designu'.. Nu conteaza cat de productiv e, ci faptul ca se poate!

[ecou]

AlStar m-am gandit si eu la asta ca si solutie dar ia gandeste-te la faptul ca eu nu pot decat sa las background-ul alb deoarece curba pusa pe cele 2 div-uri de deasupra nu poate fi colorata la exterior (sau cel putin nu cred ca ar merge). O sa rezulte alb background-ul si nu-mi ramane decat sa colorez restul dar e o idee totusi daca as gasi sa fac ceva pe langa + un scris cu care sa se lege una de alta, adica sa nu zica lumea ca e facuta treaba in graba din html