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
Comments
Post a Comment