0

I've a CSS3 text-shadow attribute that works for IE11, Google Chrome, Safari and Firefox. Is it possible to convert the text-shadow value to IE9 "compatible"? I want to have IE9 to have the same effect as IE11, Google Chrome, Safari and Firefox

.title {
    text-shadow: 0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 0 3px 0 #bbb,
    0 4px 0 #b9b9b9, 0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}
DANLEE
  • 443
  • 1
  • 8
  • 25
  • Thanks for sharing the article. I've seen that article before. But "filter" doesn't multiple values to create the same effect as IE11, Google Chrome, Safari and Firefox. – DANLEE Sep 10 '15 at 00:21
  • i dont think there is any chance to implement a text-shadow like this into IE9. So think about a gracefull degradation. – Thomas Fellinger Sep 10 '15 at 09:58

3 Answers3

1

this is explained here: https://stackoverflow.com/a/6905713/1165121 IE 6-9 uses their own proprietary filter method.

you should rethink about looking webpages exactly the same in every browser, which is a bit obsolete nowadays.

Community
  • 1
  • 1
Thomas Fellinger
  • 646
  • 3
  • 19
  • About your second statement, : http://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement – vals Sep 10 '15 at 07:37
0

I think you can try http://css3pie.com/ which is basically a compativility layer for CSS3 on older IE versions. For example:

.title {
    text-shadow: <whatever>;
    behavior: url(path/to/pie_files/PIE.htc);
}
Andrew Dunai
  • 3,061
  • 19
  • 27
  • Thanks Andrew. Nice to know! However, according to http://css3pie.com/documentation/q-and-a/ It only support box-shadow and not text-shadow. – DANLEE Sep 10 '15 at 01:29
  • also note that it has to be the protocol://absolute.path.webseite/pie_files/PIE.htc http://css3pie.com/documentation/known-issues/#relative-paths – Thomas Fellinger Sep 14 '15 at 00:58
0

Here are some of the alternatives you have:

  • Write another nice looking css layout that is supported by older browsers.

  • Use images. There are a few text to image converters out there, also autmated prozesses are possible (with a bit amount of work)

  • You can try to find a JS-SVG library with VML support and use it to create images on the fly. VML is a built-in vector graphics format of old-ies which is similar to svg.

Thomas Fellinger
  • 646
  • 3
  • 19