Hai teman-teman, bertemu kembali diwebsite dumetschool ini. Pada kesempatan kali ini saya akan memberikan sebuah tutorial sederhana tentang Cara Membuat Bulan Sabit dengan CSS3.

Dipembahasan kali ini saya memanfaatkan sebuah property dari css3 yaitu border-radius dan box-shaddow dalam membuat bulan sabit. Ya sebenarnya iseng aja dan saya ingin menshare cara membuatnya, semoga saja berguna atau teman-teman membutuhkannya.

Oke tanpa panjang lebar mari kita mulai Cara Membuat Bulan Sabit dengan CSS3, pertama jalankan/run text-editornya, kemudian ketiklah script HTML seperti pada gambar dibawah ini :

Cara Membuat Bulan Sabit dengan CSS3

Pada script diatas kita membuat 1 buah div langit sebagai induk dan div bulan sebagai child yang nantinya akan kita bentuk sebagai bulan. Oke langkah selanjutnya teman-teman tambahkan script CSSnya seperti pada gambar dibawah ini :

Cara Membuat Bulan Sabit dengan CSS3

Jika sudah, silahkan coba teman-teman jalankan maka hasil awalnya akan menjadi seperti pada gambar dibawah ini :

Cara Membuat Bulan Sabit dengan CSS3

Bagaimana ? masih kurang menarik ya teman-teman. Oke kalau begitu kita coba tambahkan sedikit bintang, namun disini kita tidak membuat bintang dengan css. Kita hanya menggunakan gambar pattern bintang. Teman-teman bisa download gambar bintangnya dibawah ini :

Cara Membuat Bulan Sabit dengan CSS3

Jika sudah didownload file gambar bintang diatas, maka langkah selanjutnya teman-teman sesuaikan dan tambahkan CSS diatas menjadi seperti pada gambar dibawah ini :

Cara Membuat Bulan Sabit dengan CSS3

Jika sudah, coba teman-teman refresh browsernya dan lihat hasilnya akan menjadi seperti pada gambar dibawah ini :

Cara Membuat Bulan Sabit dengan CSS3

Cukup menarik ya teman-teman. Oke kalau begitu sampai disini dulu pembahasan kali ini tentang Cara Membuat Bulan Sabit dengan CSS3. Semoga dapat bermanfaat buat teman-teman, dan sampai bertemu dipembahasan selanjutnya.

Terimakasih