Membuat Bentuk Hantu Lucu dengan CSS Bagian 1

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan sebuah tutorial unik tentang bagaimana membuat animasi hantu menggunakan HTML dan  CSS. Tahukah kalian bahwa css juga bisa membuat sebuah bentuk karakter dengan menarik?

Kebanyakan dari kita semua hanya memanfaatkan css untuk dekorasi hanya dengan mengubah warna, ukuran, dan mengatur peletakan objek. Sebenarnya CSS juga bisa digunakan untuk membuat objek dan menggabungkannya menjadi sebuah karakter.

Contohnya kali ini saya akan menggambar sebuah karakter hantu lucu seperti berikut

 .

 

Baiklah teman-teman, kita mulai saja sekarang kita buat html seperti berikut

 

Pada html diatas kita sudah bisa mendefinisikan bahwa nanti kita akan membuat sepasang mata dan sebuah mulut. dengan begitu kita buat CSS nya seperti berikut:
 

Pertama kali kita akan memberikan background hitam pada body karena karakter hantu yang akan kita buat akan berwarna putih.

selanjutnya adalah CSS untuk membuat bentuk badan dari hantu tersebut

 

 

Lalu kita akan berikan style untuk mata dari hantu tersebut

 

sehingga akan jadi seperti ini untuk sementara

 

.sekarang kita akan membuat bagian mulut dari hantu tersebut dengan CSS seperti ini.

Maka hasilnya akan terlihat seperti ini

 

Baiklah teman-teman, seharusnya hantu tersebut sudah terlihat seperti diatas, pada artikel selanjutnya saya akan memberikan efek animasi pada karakter tersebut agar terlihat lebih hidup dan lucu.

Pada artikel selanjutnya juga saya akan berikan source code nya untuk kalian. Sampai jumpa pada artikel selanjutnya

15 Desember 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat