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