title: Text Shadow in IE 11 not working
body: <p>The text in this example of text-shadow doesn't display in IE 11, but does in FF &amp; Chrome.</p>
  
  <p><a href="http://codepen.io/maxnguyen/pen/" rel="nofollow">http://codepen.io/maxnguyen/pen/</a></p>
  
  <p>According to <a href="http://caniuse.com/css-textshadow" rel="nofollow">caniuse.com</a> IE has had full support for text-shadow since IE 10. Is there a way to alter the CSS so it would work in IE11?</p>
  
  <pre><code>&lt;div id="box"&gt;
    &lt;p id="flashlight"&gt;
      &lt;span id="flash"&gt;MAX&lt;/span&gt;
      &lt;span id="light"&gt;NGUYEN&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html {
    overflow: hidden; /*FF fix*/
    height: 100%;
    font-family: Geneva, sans-serif;
    background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%));
  }
  
  body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  p {
      margin: 0;
  }
  
  
  /* box ------------------------------------------------------ */
  
  #box {
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    -webkit-backface-visibility: hidden; /* fixes flashing */
  }
  
  
  /* flashlight ------------------------------------------------------ */
  
  #flashlight {
    color: hsla(0,0%,0%,0);
    perspective: 80px;
    outline: none;
  }
  
  
  /* flash ------------------------------------------------------ */
  
  #flash {
    display: inline-block;
    text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
    transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
  }
  
  #box:hover #flash {
     text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
    margin-left: 20px;
    transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
  }
  
  
  /* light ------------------------------------------------------ */
  
  #light {
    display: inline-block;
    text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
  }
  
  #box:hover #light {
    text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
    transform: rotateY(-60deg);
    transition:         transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
  }
  </code></pre>