Ads Banner

Membuat Smiley Menggunakan CSS

Membuat Smiley Menggunakan CSS
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;
}

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar