- This topic is empty.
-
AuthorPosts
-
February 12, 2013 at 7:47 pm #42689chrisburtonParticipant
Is it possible to create multiple text shadows like below in at least IE9 where one shadow matches the background and the other is light gray?
Code:
Check out this Pen!
February 13, 2013 at 4:58 am #124374Paulie_DMemberFrom my reading it’s possible to create a single shadow in IE9 with the shadow filter but I can’t find any indication of any way to add multiple or graduated shadows.
filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/
February 13, 2013 at 5:54 am #124388chrisburtonParticipantThanks, Paulie. I can’t seem to get that filter you supplied to work in IE.
February 13, 2013 at 7:36 am #124405Paulie_DMemberI got it from here: http://stackoverflow.com/questions/6905658/css3-text-shadow-in-ie9
but it looks like there may be another version
p.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}February 13, 2013 at 7:52 am #124407chrisburtonParticipantI saw that one and couldn’t get it to work either. Very weird.
February 13, 2013 at 6:23 pm #124505clbutticParticipantAlthough it’s not the most semantic solution, couldn’t you just create to divs, both containing the “6” where on has color: red and the other color: white & the filter and then just stack them with a bit of displacement?
February 13, 2013 at 7:22 pm #124511chrisburtonParticipant@clbuttic I could but I think I might have to just say screw it on this particular issue.
February 2, 2015 at 12:42 am #194844ShikkedielParticipantLet me revive this one… there’s an ‘okay’ solution with a pseudo element if one would still like to support older IE versions :
Any comments/improvements on this? The idea is that it goes into a separate stylesheet with a conditional statement. All other browsers will be using the modern implementation (which isn’t shown in the pen for demonstrative purpose).
February 2, 2015 at 5:08 am #194887ShikkedielParticipantUnfortunately we run into the same trouble when trying to apply a blur – the special IE filters do not seem to work at all anymore. The only way to reliably implement a blur would be to wrap the text inside an svg and apply a Gaussian deviation, which would really lead to far. It does look a lot better (than nothing at all) with a pseudo element already though. And using hsla, supported in IE9, can help a bit as well.
May 3, 2015 at 9:30 am #201535jaybadz-cssParticipantJust happened to stumble upon this topic, and wanted to weigh in. I am also having no success using the IE filters any longer. The filter appears to be applied via the Developer Tools, but IE refuses to render it.
May 3, 2015 at 12:30 pm #201541ShikkedielParticipantI figured out that they still work but only if an actual legacy browsers is used or if you have given special permission when emulating…
May 3, 2015 at 12:45 pm #201542jaybadz-cssParticipantThank you for that update, as that was the case for me as well. I viewed my site through IE Tester, and the filters were working just fine. Perhaps IE 10+ developer’s tools uses an emulator that does not totally render the way the legacy browsers do. Thankfully this is not an issue in 99% of the work that I do.
May 4, 2015 at 1:19 am #201549MattDiMuParticipant@jaybadz-css Your guess is right. IE10+ Developer Tools are busted and should not be used for doing serious testing.
I’ve got a virtual machine with IE9 for that (as you cannot install multiple IE versions -.-). Alternatively services like crossbrowsertesting.com may help to test with (nearly) every possible device-os-browser-combination (they are much slower, though).
Regards
Matt -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.