Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE Text Shadow

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #42689
    chrisburton
    Participant

    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!

    #124374
    Paulie_D
    Member

    From 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*/

    #124388
    chrisburton
    Participant

    Thanks, Paulie. I can’t seem to get that filter you supplied to work in IE.

    #124405
    Paulie_D
    Member

    I 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);
    }

    #124407
    chrisburton
    Participant

    I saw that one and couldn’t get it to work either. Very weird.

    #124505
    clbuttic
    Participant

    Although 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?

    #124511
    chrisburton
    Participant

    @clbuttic I could but I think I might have to just say screw it on this particular issue.

    #194844
    Shikkediel
    Participant

    Let me revive this one… there’s an ‘okay’ solution with a pseudo element if one would still like to support older IE versions :

    Text-shadow alternative

    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).

    #194887
    Shikkediel
    Participant

    Unfortunately 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.

    #201535
    jaybadz-css
    Participant

    Just 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.

    #201541
    Shikkediel
    Participant

    I figured out that they still work but only if an actual legacy browsers is used or if you have given special permission when emulating…

    #201542
    jaybadz-css
    Participant

    Thank 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.

    #201549
    MattDiMu
    Participant

    @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

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.