Jump to content
Fi8sVrs

CSS3 Logo Design

By Fi8sVrs, in Programare

Recommended Posts

  • Active Members
Fi8sVrs Rookie

Fi8sVrs

Posted
  • Active Members
Posted

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

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

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

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

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.

logo_model.png

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

css3_logo_head.png

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

css3_logo_body.png

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

css3_logo_wings.png

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

css3_logo_tail.png

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

3mstek Newbie

3mstek

Posted
Posted

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

ecou Newbie

ecou

Posted
Posted

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

ecou Newbie

ecou

Posted
Posted

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 :D 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 Rookie

AlStar

Posted
Posted

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 Newbie

ecou

Posted
Posted

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
Go to topic listing
×
×
  • Create New...