CSS text-shadow in IE9 (and also IE7 & 8)
JavaScript library to apply CSS3 text-shadow like effect in MSIE
This script would cause a serious problem in accessibility. So I canceled publishing the script source.
Re-published a new one. Get new source code from here. (Now only supports IE9, won't support IE8 nor IE7 anymore.)
English summary for asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow. (Not the full translation.)
Sample Demo.
Also, you can do these with this script.
Rainbow text-shadow in MSIE,
Animated multiple Shadows in IE
STOP SOPA! in MSIE (Now works in MSIE9 only)
- What Is This
-
- JavaScript library to apply CSS3 "text-shadow" effect (or something like that) in MSIE. Works in MSIE 7 to 9.
- Same as CSS, the shadow effects cascades, and also, can be nested between elements.
- The library is designed to be used in external JavaScript file, so you can apply shadow effects in all of your site with a single file.
- How To Use
-
- Copy the script source and make the JavaScript file (eg: textshadow.js), and link it from HTML. That's all.
- text-shadow values will be loaded from stylesheets automatically.
note : Due to MSIE bugs, '!important' rules will be ignored (MSIE drops it). And MSIE won't recognize @Media queries correctly in some cases. - You can also set text-shadow values by yourself.
Required setting is simple.
In the script (between function ieShadowSettings(), see the source), add arrays of "selector" and "text-shadow value" in CSS like format. Such as{ sel : 'h1', shadow : '1px 1px 1px gray' },
note : selectors and shadow values must be quoted. And don't forget to add comma at the end of each array. (but NO comma in last array.)
{ sel : 'em', shadow : '1px 1px 1px rgb(255, 0, 0)' }
As in CSS, the array written after has priority. - sel : is for CSS Selector types. Selector types supported are E (Element), #id, .class, ::pseudo / :pseudo, [attr], E F (Descendant), E > F (Child), E + F (Adjacent sibling), E ~ F (General sibling).
- Supported pseudo elements are ::before / ::after / ::first-letter (IE8 & 9), ::first-line (IE9).
Supported pseudo classes are :first-child / :link / :hover / :focus / :active (IE7 to 9), :lang() (IE8 & 9), :nth-child() / :nth-of-type() / :last-child / :not() (IE9) etc.
note : IE8 recognizes only single colon (eg. :before) in pseudo elements. - You can use selectors in combination (eg: E.class:hover), and also can omit E in #id and .class selectors. (universal matching (*) is the default behavior.)
Multiple classes (eg: .classA.classB), and multiple selectors in combination (eg: E > F > G, E F + G) are also supported. - You can apply shadow value to several selectors at once, such as
{ sel : 'h1, h2', shadow : '1px 1px 1px gray' }
- shadow : syntax is almost the same as CSS text-shadow. (the only difference is that values must be quoted.)
'none' | '[<shadow>,]* <shadow>' where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
- Do you recognize the syntax "[<shadow>,]* <shadow>"?
This means, Multiple Shadows are OK!! in this script.
And as in CSS3, Multiple shadow effects are applied front-to-back: the first shadow is on top. - Color profiles supported are colorname, #nnnnnn (#nnn), rgb(), rgba().
You can use "%" values in rgb() and rgba().
Color is optional, if not specified, script uses the value of the element's color property. And Color is allowed before or after the <length> values.
note : When "#nnnnnn (#nnn)" is written before the length values, MSIE displays shadow incorrectly. So in this case, script will ignore to draw shadow. - Length units available are not only px, but also em, ex, cm, mm, in, pt, pc.
- Blur-radius is optional. If not specified, it will be 0.
- Opacity (darkness) of the shadow is 0.6 in default. If you use rgba(), you can control darkness.
- As you see in syntax, 'none' value is available, and you can overwrite like text-shadow : none;.
- When using with :hover pseudo, you can Show the shadow, Hide the shadow, and Change the shadow.
- You can apply shadows with backgrounds.
And with :hover, you can Show the shadow & bg, Hide the shadow & bg, and Change the shadow & bg. - '!important' rules are also supported.
If you already use jQuery, jQuery plug-in version is also available.obsoleted
note : jQuery plug-in version lacks supports for ::before / ::after pseudo elements, :focus / :active dynamic pseudo classes.
- JavaScript Source
-
- Get source code from here.
"CSS text-shadow in IE9 (and also IE7 & 8)"へのTwitter上でのコメントやRT
16件のツイートがあります。
ツイート 1
text-shadow for IE9 that looks good and actually works - http://t.co/f5ycrGn
ツイート 2
text-shadow for IE9 that looks good and actually works - http://t.co/f5ycrGn
ツイート 3
Oh, and found a handy little js fix for text shadows in Internet Explorer - http://t.co/Hfec1OUR (thanks to the dev for sharing it).
ツイート 4
Oh, and found a handy little js fix for text shadows in Internet Explorer - http://t.co/Hfec1OUR (thanks to the dev for sharing it).
ツイート 5
#css3 asamuzaK.jp : CSS text-shadow in IE9 (and also IE7 & 8): http://t.co/QvtfGGEU
ツイート 6
asamuzaK.jp : CSS text-shadow in IE9 (and also IE7 & 8) http://t.co/F88lX0rb #jquery
ツイート 7
Hi. Try this one. CSS text-shadow in IE9 http://t.co/1rQX5Xc4 RT @tpanicucci: #IE really ruins the web. I want a simple text-shadow and ...
ツイート 8
Hi, try this. http://t.co/1rQX5Xc4 RT @asiermarques: el filtro dropshadow de Internet Explorer es una bullshit, ...
ツイート 9
Hi, try this. http://t.co/1rQX5Xc4 RT @hydrox24: IE9 is a decent but still utterly stupid dealing w/ some css3. e.g. text-shadow, ...
ツイート 10
thanks! RT @asamuzakjp: Hi, try this. http://t.co/kNMkQX2O RT @asiermarques: el filtro dropshadow de Internet Explorer es una bullshit, ...
ツイート 11
Hi, try this. http://t.co/1rQX5Xc4 RT @artosousa: anyone got a fix for text shadow in ie?
ツイート 12
@niclashulting Before, try the latest version http://t.co/1rQX5Xc4 It will work stand-alone, or with jQuery. (No need of cssSandpaper)
ツイート 13
Try this. http://t.co/1rQSyn2U RT @webguync: what's the best way to implement CSS text-shadow for IE? #webdevproblems
ツイート 14
Here you are http://t.co/1rQSyn2U RT @emily_michels: #CSS #CSS3 #HTML Can someone tell me how to do a text shadow in IE that won't...
ツイート 15
@AdamTheTech Oops, english document is this one. http://t.co/1rQSyn2U
ツイート 16
asamuzaK.jp : CSS text-shadow in IE9 (and also IE7 & 8) http://t.co/6KjV8kEl