Baseball season is in full swing in North America and I’ve noticed some nice changes to the design of the MLB.com website. In addition to changing their Flash content slider to JavaScript, they’ve also started to supercharge their design with some CSS3 enhancements.
On the game wrap-up pages, there’s some subtle use of rounded corners, opacity, and text-shadow, the latter of which I’ll be focusing on here.
The experience on the site is pretty similar on older versions of IE as it is on modern browsers. Here’s a screenshot of a game wrap-up page in IE6:
As you can see, the big block of Impact text has a slight drop shadow applied, even in IE6.
Here’s how the same page looks in Chrome 10:
Not much difference. The shadow is a bit stronger, and there are rounded corners on the nav/box section at the top that don’t appear in the IE6 shot.
The Blur Filter for IE Text Shadow
I would have thought they’d be using a script like this one or this one, or even the Microsoft-only shadow filter. While those are options to consider, MLB.com is instead using the proprietary glow filter.
Here’s the syntax taken right out of the MLB.com source:
.element {
filter: glow(color=black,strength=5);
}
In that particular MLB.com example, they’ve layered multiple text-shadows using the CSS3 standard syntax, and then used the glow filter (shown above) to create something similar for IE.
The glow filter lets you set the color and the strength. The strength is a value in pixels, but you don’t use a unit, just a number. From my limited testing, it’s a pretty ugly filter, and might only come in handy in a few instances. Also, if you have another filter declared on the same element (opacity, for example), the second filter will take precedence (as per the CSS cascade). So this will not work:
.element {
filter: alpha(opacity=70); /* the opacity won't work! */
filter: glow(color=black,strength=5);
}
Instead you have to separate the filter functions with commas on a single line:
.element {
filter: glow(color=black,strength=5), alpha(opacity=70); /* now both will work */
}
Of course, this opacity setting does not just affect the black “glow”, it will also affect the text to which it’s applied and any child elements–as is always the case with traditional CSS opacity.
Some Warnings
This is by no means a one-size-fits-all solution, but if you have a simple text shadow that you want to present to IE users, and you prefer to avoid using a bloated script or plugin, then this single line of code could work.
In the example above, if you were to remove the text shadow from that text, the text would be less readable. So it’s understandable why the developers aren’t just letting IE see plain text. White text on ever-changing photos is not going to look very professional, if legible.
But in many cases, you’d be better off not using a filter or any kind of script. Let IE see a lesser experience, and save the good stuff for the better browsers.
Also, even though the IE filters are not loading up any extra scripts, they still have performance issues and can slow the rendering of the page. So again, if you can avoid them, then do so.
This is very interesting:
#element {
filter: alpha(opacity=70); /* the opacity won't work! */
filter: glow(color=black, strength=5);
}
-compare that syntax with the following equivalent:
#element {
color: red;
color: green;
}
What is the color that will be rendered for the content of your selected #element?
-According to your presumption it should be “yellow”!
But the very meaning of “CSS” says: it shouldn’t and will not.
#element content will be rendered “green”, that is: exactly as stated.
The CSS letter “C” which stands for “Cascading” should be self-explanatory.
IE “filters” can be chained, and might or should be chained like this:
filter: glow(strength=5 color=black)blur(strength=2 direction=45)blur(strength=2 direction=90)blur(strength=2 direction=135)blur(strength=2 direction=180)blur(strength=2 direction=225)blur(strength=2 direction=270)blur(strength=2 direction=315)blur(strength=2 direction=360);
All used syntax is backward compatible with IE 4, which was released by the end of 1996.
Comma-separation is acceptable but not required. The following coding-style is also valid:
#element{
padding: 10pt;
height: 100pt;
width: 400pt;
font: bold 30pt verdana;
color: white;
filter: glow(strength=5 color=black)
blur(strength=2 direction=45)
blur(strength=2 direction=90)
blur(strength=2 direction=135)
blur(strength=2 direction=180)
blur(strength=2 direction=225)
blur(strength=2 direction=270)
blur(strength=2 direction=315)
blur(strength=2 direction=360);
}
—-
#element: height; width; [required], (some) padding [to avoid effect clipping] and color [ of your choice] may be required to control the rendering.
As demonstrated -the filter chain length is not limited and the state of effect is inherited from previous cascade.
I never meant to imply anything by what I said. The reason that I pointed that out is to ensure that people don’t go writing multiple filters. The problem is, filters are not standard CSS, so they work in different ways. I was just making clear what would be necessary if you want to use multiple filters on a single element.
Sure, it’s a bit of a no-brainer, but filters generally do not work the same way as regular CSS, so I think it was relevant to point that out. And I admit that when I wrote this, I honestly was not thinking about the cascade, so thanks for pointing that out. I’ll fix the wording.
But think about it: If you have one filter affecting opacity and another filter affecting glow, then your snap reaction might be that you can use both. Naturally, as you pointed out, that’s not the case.
Useful info.
We’ve used similar coding for accenting text with color, within a predefined DIV ‘main container’ block.
Thanks
Or you can position a duplicate of the text below the original text positioned slightly to the right and below. Then just hide it in other browsers. But then you got this extra html code sitting there.. blehh.
oh and it also looks awful :P
Thanks for this tip. I’ll compare my code to this one.
As I said on a twit, using opacity is not always a good idea because it’s apply to the entire element.
As you are using IE filter, you can directly specify the alpha value of color, according to the scheme AARRGGBB.
For example, with your parameters :
filter: glow(color=#46000000,strength=5) // 46 is 70 in hexadecimal
But, truly, the glow on IE is absolutely awful :)
Very thanks my love…
Heu Louis take a look at http://css3pie.com/. Its a nice lib that allow using most CSS3 features on IE using and .HTC solution. It work nice and is one of best solutions i have seen for now.
Reggards from Cuba and nice blog, continue posting
I agree, CSS3 Pie is great — but it doesn’t (as of this writing) provide support for text-shadow in IE (only box-shadow). So in this case, you have to use another scripting hack or else one of Microsoft’s weird filters.
I don’t know why, but don’t work in IE9…any help?
I think you may need to use -ms-filter: in IE9, at least if it isn’t set to “standards mode” I think…
Thanks a lot it help me for the design of my blog, i don’t understand every options of the properties but I use examples of CSS code and I adapt them !
Firefox latest does support it.
You may have to use -mozilla-text-shadow
I suppose that this might’ve been an unintentional mistake, but it’s -moz-text-shadow.
Nice idea, but I’ve seen this around, and it seems to work IE7+:
filter: dropshadow(color=#000000, offx=1, offy=2);
NOT Working in IE9 :( any help
Ignore it, nobody uses IE9 anymore.