Membuat efek tulisan dengan CSS

Sedikit berkreasi masalah tampilan template, dengan membuat warna pada template kita pastinya sudah tak asing lagi kedengarannya, tapi kalau masalah tulisan dengan berbagai efek sepertinya masih jarang, di gunakan oleh para

blogger, pastinya tidak semua orang memperhatikan masalah ini, dan memang
tidak terlalu penting kalau di bandingkan dengan tutorial lainnya, tapi kalau menurut zoel siy penampilan juga harus diperhatikan agar lebih,, gimana gitu blog kita,, haaha.. udah deh dari pada terlalu banyak cingcong.. mending langsung saja ke TKP..

Niy kalau yang tertarik dengan tutorial efek ini,,
Oia perlu diketahui juga semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

Safari 3.1 (Mac/Win)	yes, but no multiple shadows
Safari 4 (Mac/Win)	yes, full support
Opera 9.5 (Mac/Win/Lin)	yes, full support
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes, full support
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes, full support
IE 7/8 (Win)	no
Shiira (Mac)	yes, but no multiple shadows
Safari on iPhone	yes, but no multiple shadows
Opera Mini 4.1	yes, no blur radius

Gimana apa browser sobat sudah  support? atau pengen lanjutin??
Perlu diketahui juga kode dasar CSS nya akan seperti ini:

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;

• color : berarti warna yang akan tampil pada tulisan tersebut akan berwarna #000 "hitam"
• background : warna belakang dari tulisan tersebut berwarna putih "#fff"
• 1px 1px 1px #424242 (untuk warna bayangannya "shadow")

Untuk warna, jika sobat membutuhkan berbagai macam warna, sobat bisa berkreasi dengan penuh warna, tinggal dapatkan kode warnanya dini
dan untuk point yang ketiga, sobat bisa pilih shadownya seperti di bawah ini, tinggal kreasikan sesuai keinginan sobat...

1. color: #000; background: #fff; text-shadow: 2px 2px 3px #000;
2. color: #000; background: #fff; text-shadow: 2px 2px #000; 
3. color: #000; background: #fff; text-shadow: 2px -2px 3px #000;
4. color: #000; background: #666; text-shadow: 0px 1px 1px #fff;
5. color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;
6. color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
7. color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
8. color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
9. color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
10. color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;
11. color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Silahkan berkreasi dan semoga berhasil, sehingga blog sobat bisa lebih hidup...

sumber: miscah.blogspot.com