Bagaimana Cara Membuat Efek Tulisan Dengan CSS Text Shadow

Bagaimana Cara Membuat Efek Tulisan Dengan CSS Text Shadow-  Mungkin anda pernah melihat ada sebuah blog yang kelihatan keren dan anda ingin seperti itu.  Tahukah anda, bahwa kita bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya.

Selain cara membuat efek tulisan ini, kedepan, kami juga akan membuat tutorial mengenai "Bagaimana cara membuat efek zoom pada gambar', semuanya ini bertujuan untuk membuat blog anda menjadi kelihatan lebih hidup dan keren.

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

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

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

• color : #000 adalah warna dasar tulisan
• background: #fff adalah warna latar
• 1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

	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;

Bagaimana gan..??  Anda pasti suka kan..! sekarang tampilan blog anda menjadi sangat keren bagaikan studio Hoolywod.

Bagaimana Cara Membuat Efek Tulisan Dengan CSS Text Shadow