Penggunaan text shadow bisa menjadi satu cara untuk membuat tampilan sebuah teks terlihat berbeda dan semakin menarik. Teks dengan efek bayangan atau lebih dikenal dengan text-shadow, sebenarnya hanyalah sebuah penambahan kode css yang amat sederhana namun mampu menciptakan berbagai variasi bentuk teks. Efek bayangan yang tercipta bisa merupakan sebuah bayangan tunggal, bayangan ganda atau bahkan bayangan yang bertumpuk/berulang (multiple). Kode css teks shadow kompatibel untuk semua browser dan kode yang digunakannya pun sama, terkecuali di Internet Explorer (IE). Perbedaan kode di IE ini, sekali lagi menjadi pertanyaan besar bagi semua blogger. Mengapa di IE segalanya serba berbeda dan bahkan beberapa kode css3 sama sekali tidak dapat difungsikan? Kondisi yang seperti ini bahkan membuat beberapa rekan blogger mengatakan, "Buat apa memikirkan IE? Biar matipun kita tak akan merasa prihatin!". Beberapa yang lain juga bilang, "Ngapain mesti menggunakan IE, toh masih banyak browser lain yang jauh lebih bagus dan sangat akomodatif sekaligus mempunyai tingkat kompabilitas tinggi terhadap kode html yang baru, terutama css 3!".

Apa yang tersampaikan tersebut di atas sebenarnya ada benarnya, sekalipun kejadian seperti ini (kompabilitas IE) terkadang juga menjadi pemikiran tersendiri. Apapun juga, masih cukup banyak pengguna IE dan tidak boleh tidak apa yang kita tuangkan di blog, sebagian pengunjung akan membukanya juga dengan IE. Dus ..., apabila kita tidak menggunakan kode yang kompatibel di IE, maka apa yang terposting juga hanya akan dapat dinikmati secara sempurna di luar IE, sementara ketika dibuka lewat IE apa yang sudah kita buat dengan susah payah tak akan termunculkan sesuai harapan. Yah .. itulah yang akhirnya membuat kita semua jadi pusing dan merasa prihatin. Ah ... seandainya saja IE seperti yang lain ...

Bagaimana menciptakan teks shadow yang kompatibel di semua browser termasuk di IE? Beberapa cara dapat kita lakukan :

Menggunakan kode css text-shadow dan menambahkan kode css yang khusus dipergunakan untuk menciptakan text shadow di IE.
Menggunakan jQuery text-shadow.
Menggunakan file .htc

Dari ketiga cara di atas, sebenarnya yang paling nyaman digunakan adalah cara yang ke-3. Dengan hanya menggunakan file berekstensi htc ini, maka beberapa fungsi sekaligus sudah dapat bekerja secara sempurna di IE, seperti rounded corners, box shadow (drop shadow) dan text shadow. Sayangnya file ini harus diupload terlebih dahulu di blog yang kita gunakan. Keharusan seperti ini tentu saja tak mungkin kita lakukan di blogspot. Sayang ... sekali lagi amat mengecewakan ..... Cara lain yang terasa paling mudah tentunya dengan menggunakan jQuery teks shadow. Hanya dengan menggunakan jQuery-1.3.2.js atau jQuery-1.4.2.js dan jQuery-textshadow.js, maka kode css yang kita tuliskan secara otomatis akan langsung bekerja secara sempurna termasuk di IE. Sangat praktis dan membuat siapapun dengan mudah melakukannya.

Cara mennuliskan kode text shadow

Untuk membuat sebuah teks dalam bentuk teks dengan bayangan (text shadow), secara umum dituliskan sebagai :

.textshadow {
     text-shadow: ..px ..px ..px color;
     }

, sehingga bentuk lengkap detail kode css-nya seperti contoh berikut :

.textshadow {
     text-shadow: 1px 1px 1px #fff;
     }

, atau dalam bentuk yang lain seperti berikut :

h1 {
     text-shadow: 1px 2px 2px #000;
     }
h2 {
     text-shadow: 0 1px 8px black;
     }
p {
     text-shadow: 2px 2px 10px #222;
     }

Anda dapat juga menuliskan dalam bentuk yang berbeda seperi ini :

h1.textshadow {
     black 1px 1px 6px;
     }

, atau juga misalnya seperti :

h1.textshadow {
     2px 2px 2px rgba(0,0,0,0.9);
     }

Menambahkan kode pelengkap lain pada text-shadow

Apabila menghendaki sebuah syntax lengkap yang diipadu dengan text-shadow, anda dapat menambahkan beberapa kode css yang lain hingga dihasilkan sebuah syntax dengan fungsi tertentu. Di bawah ini adalah sebuah contoh yang bisa digunakan sebagai referensi untuk menciptakan fungsi yang lain melalui sebuah syntax.

h1.tshad {
     font: 22px Droid Serif;
     font-weight: bold;
     color: #000;
     text-shadow: 2px 2px 2px #8a4e01;
     padding: 5px 10px;
     text-align: center;
     margin: 20px auto;
     }

Text shadow untuk Internet Explorer (IE)

Agar text shadow dapat berfungsi di IE, kita harus menambahkan kode css yang khusus untuk menciptakan efek shadow pada teks. Bentuk kode cssnya sebagai berikut :

filter: progid:DXImageTransform.Microsoft.Shadow(color='#8a4e01',direction='125',strength='2');

Jika kode ini digabungkan dengan syntax di atasnya, maka kode barunya akan terlihat seperti ini.

Text shadow dengan penambahan kode css text shadow di IE

h1.tshad {
     font: 22px Droid Serif;
     font-weight: bold;
     color: #000;
     text-shadow: 2px 2px 2px #8a4e01;
     padding: 5px 10px;
     text-align: center;
     margin: 20px auto;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#8a4e01',direction='125',strength='2');
     }

Keterangan penggunaan kode text-shadow di IE

color='#8a4e01' merupakan warna shadow (bayangan)
direction='125' digunakan untuk menciptakan posisi bayangan. Anda dapat menggunakan nilai 0 s/d 360
streng='2' digunakan untuk mengatur kekuatan shadow, dimana semakin besar nilainya, maka bayangan akan semakin lebar (luas).

Beberapa contoh text-shadow dan bentuk kode css-nya

Contoh bentuk Text Shadow-1

p.shadow-1 {
     font:18px Droid Serif;
     font-weight: bold;
     text-shadow: 1px 2px 3px #222;
     padding:3px 10px;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888',direction='145',strength='3');
     }

Penulisan kode HTML-nya :

<p class="shadow-1">Tuliskan teks di sini!</p>

Contoh bentuk Text Shadow-2

p.shadow-2 {
     color: #FFFFFF;
     font: 18px Droid Serif;
     text-shadow: 1px 2px 3px #000;
     font-weight: bold;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='145',strength='2');
     padding: 3px 10px;
     }

Penulisan kode HTML-nya :

<p class="shadow-2">Tuliskan teks di sini!</p>

Contoh bentuk Text Shadow-3

p.shadow-3 {
     color: #CCCC66;
     font: 16px Droid Serif;
     text-shadow: 1px 2px 2px #ea8605;
     font-weight: bold;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#ea8605',direction='145',strength='2');
     padding: 3px 10px;
     }

Penulisan kode HTML-nya :

<p class="shadow-3">Tuliskan teks di sini!</p>

Contoh bentuk Text Shadow-4

h1.shadow-4 {
     color: #666;
     text-shadow: 0px 1px 0px #ccc;
     font: 22px Droid Serif;
     margin:15px auto;
     padding:4px 10px;
     font-weight: bolder;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc',direction='100',strength='2');
     }

Penulisan kode HTML-nya :

<h1 class="shadow-4">Tuliskan teks di sini!</h1>

Contoh bentuk Text Shadow-5

h2.shadow-5 {
     font:18px Droid Serif;
     font-weight: bold;
     color: blue;
     text-shadow: 1px 1px 4px #fff;
     padding: 5px 10px;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#ffffff',direction='135',strength='4');
     }

Penulisan kode HTML-nya :

<h2 class="shadow-5">Tuliskan teks di sini!</h2>

Contoh bentuk Text Shadow-5

h3.shadow-6 {
     color: #444;
     font: 18px Times; 
     font-weight: bold;
     text-shadow: -2px -2px 5px yellow, 0px 1px 0px red; 
     padding: 5px 10px; 
     background: #888;
     }

Text Shadow di atas berfungsi hanya di luar IE. Penulisan kode HTML-nya :

<h3 class="shadow-6">Tuliskan teks di sini!</h3>

Contoh bentuk Text Shadow-7

p.supershadow {
     font:18px Droid Serif;
     font-weight: bold;
     color: #FF0000;
     background: #555;
     text-shadow: 0 0 5px #ccc, 0 -4px 4px #c8c7c6, 2px 2px 10px #fc0c00, 2px -8px 8px #ffef3f, 
 -2px -16px 12px #f80, 2px -18px 18px #ff9702;
     padding: 20px 20px 0px; 
     }

Multiple Text Shadow ini akan berfungsi dengan sempurna di luar IE. Penulisan kode HTML-nya :

<p class="supershadow">di sini tek dituliskan</p>