Membuat Efek Api pada Teks dengan CSS

Membuat Efek pada Teks dengan CSS

Glow Effect

Kali ini saya akan berbagi ilmu mengenai CSS, yaitu memberikan efek glow (text shadow) pada teks. Ada tiga efek yang akan saya bagi di sini.

1. Fire Effect

Taufan Prihantoro

Script CSS:

.fire{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; width: 500px;}

2. Neon Light

Taufan Prihantoro

Script CSS:

.neon{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: text-shadow: 0 0 10px #fff, 0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;}

3. Shadow Effect

Taufan Prihantoro

Script CSS:

.shadow{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;}

Baca Juga

1. Cara Mudah Membuat Menu Horizontal Keren dengan CSS
2. Ternyata START Bisa Membuat Komputer HANG
3. WOW! PC dan Laptop Anda Bisa Bicara
4. Cara Melewati Adf.ly di Opera Mini
5. Hal yang Harus dilakukan Saat Sandal Jepit Putus
6. WOW! Kata Kunci Ini Akan Membuat Google Menjadi Menakjubkan!