CSS Trick: Any Text Shadow in Safari, Opera, Firefox and more
Thursday, December 8, 2011
Properti dari CSS 2 yaitu
text-shadow support pada Safari sejak versi ke-3 (termasuk pada windows), Opera sejak versi 9.5, Firefox sejak versi 3.1,
Google Chrome sejak versi ke-2, Konqueror dan iCab. Pada dasarnya, text-shadow support untuk semua browsers yang didasari dengan WebKit,
mesin render dari Safari dan Chrome. Internet Explorer 8 tidak support untuk beberapa text shadows
(kecuali untuk beberapa filter transform image DirectX). Multiple Shadows
Text Shadows ditemukan pada tahun 1997 dan kemudian baru diaplikasikan pada tahun 2009. Safari versi 3 hanya support efek satu shadow saja. Hanya efek shadow yang pertama yang bisa di tampilkan. Safari versi 4 support untuk multiple shadows. Opera 9.5 support pada efek shadow yang ketiga. Kemudian fix untuk multiple shadows pada Opera 10.5.text-shadow: -1px -1px #666, 1px 1px #FFF;
Defined in 1997 and became applicable in 2009
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
Defined in 1997 and became applicable in 2009
text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;
Defined in 1997 and became applicable in 2009
text-shadow: 1px 0 #F33, -1px 0 #33F;
Defined in 1997 and became applicable in 2009
text-shadow: 2px 0 4px #600, -2px 0 4px #006;
Defined in 1997 and became applicable in 2009
text-shadow: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;
Defined in 1997 and became applicable in 2009
text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;
Defined in 1997 and became applicable in 2009
Classical Shadows
text-shadow: 1px 1px 2px #999;
Defined in 1997 and became applicable in 2009
text-shadow: 2px 2px 3px #999;
Defined in 1997 and became applicable in 2009
text-shadow: 0 0 8px #000;
Defined in 1997 and became applicable in 2009
Glowing Borders
text-shadow: 0 0 11px #0F0;
Defined in 1997 and became applicable in 2009
text-shadow: 0 0 5px #FF0;
Defined in 1997 and became applicable in 2009
text-shadow: 0 0 3px #F90;
Defined in 1997 and became applicable in 2009
Unusual Effects
text-shadow: 0 7px 11px #390;
Defined in 1997 and became applicable in 2009
text-shadow: 0px -15px 0 #F00;
Defined in 1997 and became applicable in 2009
text-shadow: 0 0 11px #FF6;
Defined in 1997 and became applicable in 2009
text-shadow: 0 0 8px #000;
Defined in 1997 and became applicable in 2009
