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 :
<i></i><i></i>
Jika sudah simpan file htmlnya lalu kemudian ketik script CSS dibawah ini kedalam text-editor yang teman-teman gunakan :
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