Membuat Efek Shadow (bayangan) Pada Tulisan di Blog

Tutorial ini berlaku untuk semua Browser kecuali IE. ehmmm alangkah lebih baiknya jika kalian membaca daftar browser apa saja yang cocok untuk tutorial 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

Jika sudah selesai membacanya kita langsung saja ke cara pembuatan. Berikut contoh salah satu kode shadow :

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

Penjelasan :

color: #000; --> warna tulisan hitam
background: #fff; --> warna latar belakang putih
text-shadow: 1px 1px 1px #424242; --> ini adalah kode shadow yang harus anda tambahkan




Jadi anda hanya perlu menambahkan kode yang bercetak tebal saja kedalam CSS anda. Dan berikut ini adalah daftar model shadownya :

	color: #000; background: #fff; text-shadow: 2px 2px 3px #000;
	color: #000; background: #fff; text-shadow: 2px 2px #000;
	color: #000; background: #fff; text-shadow: 2px -2px 3px #000;
	color: #000; background: #666; text-shadow: 0px 1px 1px #fff;
	color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;
	color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
	color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
	color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
	color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
	color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;
	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;