Membuat Smiley Menggunakan CSS

Info [K-moe] - Membuat smiley, icon/logo dengan CSS3 sangat mungkin dilakukan saat ini, untuk membuatnya pun cukup mudah, sudah banyak orang yang membuat logo dengan hanya mengandalkan kode css saja, tanpa memerlukan bantuan aplikasi seperti Photoshop, illustrator atau coreldraw, karena memang kemampuan CSS sudah sangat canggih sekarang ini.
Seperti membuat smiley yang akan saya tulis sekarang ini.
1. Pertama untuk membuat nya sobat buat terlebih dahulu struktur HTML seperti dibawah ini.

<div id="logo">
<div class="kepala">
<div class="mata-kiri"></div>
<div class="mata-kanan"></div>
<div class="mulut"></div> 
</div>

2. Langkah selanjutnya membuat ukuran logo dengan css seperti di bawah ini

#logo {
width: 100px;
}

3. Kemudian membuat kepala (lingkaran) dengan kode css seperti ini

#logo .kepala {
position: relative;
height: 100px;
background: #222;
border-radius:50% ;
border: 2px solid #bbb;
}

4. Setelah itu sobat buat 2 lingkaran kecil untuk mata smiley tersebut.

.mata-kiri, .mata-kanan {
position: absolute;
background: #fff;
border: 2px solid #bbb;
width: 10px;
height: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
top: 15px;
}
.mata-kiri {
top:30px;
left: 20px;
}
.mata-kanan {top:30px;
left: 60px;
}
5. Langkah terakhir membuat mulut yang dapat dilakukan dengan menulis kode css seperti di bawah ini

.mulut{
top:65px;
left:20px;
position: relative;
height: 20px;
width:50px;
background: #fff;
border-radius: 0 0 50px 50px;
border: 2px solid #bbb;
}

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel