Hallo teman-teman, Bertemu kembali dengan saya di website ini. Semoga hari ini teman-teman masih diberikan kesehatan dan selalu bahagia sehingga dapat kembali mencari informasi atau upgrade skill seputar dunia website.
Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Neon Glow Text Effect CSS3. Yang di maksud Neon Glow Text disini kita akan membuat sebuah text diwebsite kita agar seperti lampu neon yang menyala. Dan sebelum kita memulainya alangkah baiknya teman-teman sudah terlebih dahulu mengenal dengan yang namanya HTML dan CSS.
Oke langsung saja kita mulai mempraktekannya, pertama-tama seperti biasa jalankan text-editor yang teman-teman gunakan dan kebetulan disini saya menggunakan sublime text. Jika sudah ketik script HTML dibawah ini :
|
1 |
<h1>M Rizal Hidayat</h1> |
Jika sudah dengan script html nya, langkah selanjutnya teman-teman tinggal menambahkan script CSS nya seperti pada gambar dibawah ini dan disini kita menggunakan css internal yah jadi masih didalam file htmlnya :
|
1 2 3 4 5 6 7 |
h1{ text-align: center; font-size: 50px; font-family: "Roboto"; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #208FC6, 0 0 30px #208FC6, 0 0 40px #208FC6, 0 0 55px #208FC6, 0 0 75px #208FC6; } |
Oke jika teman-teman sudah mengetik script CSS yang diatas maka langkah selanjutnya teman-teman simpan dengan nama terserah teman-teman dan jangan lupa dengan formatnya .html, jika sudah langkah selanjutnya silahkan teman-teman jalankan/run di browser yang teman-teman gunakan maka hasilnya akan seperti pada gambar dibawah ini :
Jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Cara Membuat Neon Glow Text Effect CSS3.
Cukup mudahkan teman-teman, oke untuk pembahasan kali ini seputar tentang Cara Membuat Neon Glow Text Effect CSS3 cukup sampai disini saja dan jika masih banyak kekurangan mohon dimaklumi, sekian dan terimakasih.