Hallo Teman-teman, bertemu kembali dengan saya di website ini dan semoga dihari ini teman-teman masih diberikan kesehatan dan kebahagiaan. Pada kesempatan kali ini saya akan memberikan tutorial cara Membuat Mata Kucing dengan CSS3.
Teman-teman pasti sudah familiar dengan mata kucing, nah diartikel ini saya akan Membuat Mata Kucing dengan CSS3. Dan seperti biasa disini saya anggap teman-teman sudah lebih dahulu mengenal dengan yang namanya HTML dan CSS. Karena jika teman-teman belum mengenal html dan css maka akan sangat sulit dalam memahami artikel ini.
Oke tanpa basa-basi lagi langsung saja kita mulai mempraktekannya. Dan seperti biasa silahkan teman-teman buka text-editornya lalu masukan script html dibawah ini :
|
1 |
<i></i><i></i> |
Jika sudah simpan file htmlnya lalu kemudian ketik script CSS dibawah ini kedalam text-editor yang teman-teman gunakan :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { text-align: center; background: black; } i { margin: 100px 40px 10px 40px; padding: 50px; display: inline-block; background: radial-gradient(ellipse 20% 125%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%), radial-gradient(circle, #ff8c00 0%, gold 100%); border-radius: 0 100%; } i + i { border-radius: 100% 0%; } |
Jika sudah simpan file cssnya, dan langkah selanjutnya jika teman-teman menggunakan css external maka teman-teman harus menghubungkan antara file html dengan file css nya dengan menggunakan tag link dihtmlnya. Dan jika teman-teman menggunakan css internal maka langkah selanjutnya hanya tinggal jalankan/run di browser yang teman-teman gunakan.
Jika berhasil maka hasilnya akan terlihat seperti pada gambar dibawah ini :
Jika hasilnya sudah seperti pada gambar diatas maka teman-teman dinyatakan telah berhasil dalam Membuat Mata Kucing dengan CSS3.
Oke untuk pembahasan kali ini cukup sampai disini, semoga bermanfaat dan sampai bertemu di pembahasan selanjutnya.
Terimakasih