Desain Logo dengan CSS3

Tutorial - 22 Jun 2012

Biasanya kita menggunakan software desain garfis seperti Photoshop atau Illustrator untuk mendesain logo dan icon. Tapi sekarang kita bisa merancang berbagai hal menggunakan CSS3. Membuat logo dan icon dengan menggunakan CSS akan membuat website Anda lebih cepat ketika diakses daripada menggunakan gambar. Berikut tutorial men-desain logo dengan CSS3.

Desain Logo Android dengan CSS3

Men-desain logo dengan CSS3 sangat mudah dan tentu sebelumnya Anda memerlukan perencanaan sempurna dalam menata elemen html. Dalam tutorial ini, hasil akhir yang kita harapkan seperti contoh logo dibawah (logo Android). Perlu Anda perhatikan, tidak semua browser mendukung penggunakan property CSS3. Namun,saat ini semua browser utama seperti Chrome, Safari dan Firefox sudah mendukung.

Desain Logo Android dengan CSS3

Property CSS3

Dalam membuat logo pada tutorial ini, kita akan sering menggunakan 2 property CSS3. Yaitu border-radius dan transform. Apabila Anda masih belum familiar dengan CSS3, silahkan pelajari terlebih dahulu tutorial CSS3.

Untuk desain logo android ini, kita akan menggunakan <div> untuk menciptakan setiap bagian. Bagian tersebut terdiri dari kepala, tubuh, tangan dan kaki. Di bawah ini merupakan gambaran sederhana tentang struktur logo yang akan kita desain.

Konsep Logo Android

Langkah 1 – Desain Kepala

Untuk desain kepala kita menggunakan elemen div. Dan juga kita gunakan properti border-radius untuk membuat kepala dengan bentuk melengkung.

HTML :

<div class="kepala">
<div class="tanduk tanduk_kiri"></div>
<div class="tanduk tanduk_kanan"></div>
<div class="matakiri"></div>
<div class="matakanan"></div>
</div>

CSS :

#logo .kepala {
position: relative;
height: 40px;
background: #bdd73c;
border-radius:60px 60px 0 0 / 50px 50px 0 0;
border: 2px solid #6fb74d;
}
.kepala .tanduk {
width: 2px;
height: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
position: absolute;
border-radius: 3px 3px 0 0;
border-bottom: 2px solid #bdd73c;
}
.kepala .tanduk_kiri {
top: -22px;
left: 15px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.kepala .tanduk_kanan {
top: -22px;
left: 73px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.matakiri, .matakanan {
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;
}
.matakiri {
left: 20px;
}
.matakanan {
left: 65px;
}

HASIL

Desain Logo Android dengan CSS3

Langkah 2 – Desain Tubuh

HTML :

<div class="tubuh"></div>

CSS :

#logo .tubuh {
overflow: hidden;
border: 2px solid #6fb74d;
margin-top: 4px;
border-radius: 0 0 10px 10px;
background: #bdd73c;
height:105px;
}

HASIL

Desain Logo Android dengan CSS3

Langkah 3 – Desain Tangan

HTML :

<div class="tangan_kiri"></div>
<div class="tangan_kanan"></div>

CSS :

.tangan_kiri {
width: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
border-radius:16px;
position: absolute;
top: 48px;
left: 68px;
height: 75px;
}
.tangan_kanan {
width: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
border-radius:16px;
position: absolute;
top: 48px;
left: 203px;
height: 75px;
}

HASIL

Desain Logo Android dengan CSS3

Langkah 4 – Desain Kaki

HTML :

<div class="kaki_kiri"></div>
<div class="kaki_kanan"></div>

CSS :

.kaki_kiri {
width: 25px;
height:40px;
background:#bdd73c;
border: 2px solid #6fb74d;
border-radius:0 0 16px 16px;
position: absolute;
border-top:2px solid #bdd73c;
left:115px;
top:155px;
}
.kaki_kanan {
left:155px;
top:155px;
width:25px;
height: 40px;
position: absolute;
background:#bdd73c;
border: 2px solid #6fb74d;
border-radius:0 0 16px 16px;
border-top:2px solid #bdd73c;
}

HASIL

Desain Logo Android dengan CSS3

Syntax Keseluruhan

HTML :

<body>
<div id="logo_container">
<div id="logo">

<div class="kepala">
<div class="tanduk tanduk_kiri"></div>
<div class="tanduk tanduk_kanan"></div>
<div class="matakiri"></div>
<div class="matakanan"></div>
</div>
                
<div class="tubuh"></div>
                
<div class="tangan_kiri"></div>
<div class="tangan_kanan"></div>
                
<div class="kaki_kiri"></div>
<div class="kaki_kanan"></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 .kepala {
position: relative;
height: 40px;
background: #bdd73c;
border-radius:60px 60px 0 0 / 50px 50px 0 0;
border: 2px solid #6fb74d;
}
.kepala .tanduk {
width: 2px;
height: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
position: absolute;
border-radius: 3px 3px 0 0;
border-bottom: 2px solid #bdd73c;
}
.kepala .tanduk_kiri {
top: -22px;
left: 15px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.kepala .tanduk_kanan {
top: -22px;
left: 73px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.matakiri, .matakanan {
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;
}
.matakiri {
left: 20px;
}
.matakanan {
left: 65px;
}
#logo .tubuh {
overflow: hidden;
border: 2px solid #6fb74d;
margin-top: 4px;
border-radius: 0 0 10px 10px;
background: #bdd73c;
height:105px;
}
.tangan_kiri {
width: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
border-radius:16px;
position: absolute;
top: 48px;
left: 68px;
height: 75px;
}
.tangan_kanan {
width: 25px;
background: #bdd73c;
border: 2px solid #6fb74d;
border-radius:16px;
position: absolute;
top: 48px;
left: 203px;
height: 75px;
}
.kaki_kiri {
width: 25px;
height:40px;
background:#bdd73c;
border: 2px solid #6fb74d;
border-radius:0 0 16px 16px;
position: absolute;
border-top:2px solid #bdd73c;
left:115px;
top:155px;
}
.kaki_kanan {
left:155px;
top:155px;
width:25px;
height: 40px;
position: absolute;
background:#bdd73c;
border: 2px solid #6fb74d;
border-radius:0 0 16px 16px;
border-top:2px solid #bdd73c;
}

Kesimpulan

CSS menghadirkan berbagai fitur terbarunya, salah satunya ialah kemampuan untuk men-desain logo dengan CSS3. Anda dapat berkreasi lebih lanjut untuk men-desain logo-logo lainnya. Selamat mencoba dan berkarya untuk men-desain logo dengan CSS3.