Kreasi Dengan Text-Shadow

Text Shadow atau Tulisan Berbayang adalah Sudah diperkenalkan dalam CSS3 atau CSS versi terakhir saat ini.

---

Vintage Retro

text-shadow:3px 3px 0 #555555, 4px 4px 0 #bbb;

Keterangan :

Text-Shadow ditengah lebih gelap dan yang belakang warna sama dengan warna teks.

---

Neon

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;

Keterangan :

Text-Shadow diatas hanya menggunakan efek blur dengan beberapa tingkatan.

---

Inset

text-shadow: 0px 2px 3px #333;

Keterangan :

Text-Shadow Inset hanya menggunakan sedikit pixel dan permainan warna dari background dan huruf biar terlihat seperti tulisannya ada didalam.

---

Anaglyphic

color:rgba(255, 0, 255, 0.4);
text-shadow: 4px 4px 0 rgba(255,255,0,0.5);

Keterangan :

Text-Shadow Anaglyphic menggunakan efek bayangan terlihat transparan.

---

Fire

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;

Keterangan :

Text-Shadow Fire sama dengan Neon, ini hanya trik warna terlihat.

---

Board Game

text-shadow: 5px 5px 0 #ffd217, 10px 10px 0 #5ac7ff, 15px 15px 0 #ffd217, 20px 20px 0 #5ac7ff;

Keterangan :

Text-Shadow Board Game sama dengan Neon dan Fire, bedanya tidak menggunakan efek blur.

---

Browser IE tidak mendukung.

Pengembang kode ini adalah Chris Spooner

2012-12-04