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