internet explorer - CSS Blurry text in IE -
i using following give text blurry effect:
html:
<h1 class="blur">blurry text here</h1>
css:
.blur { text-shadow: 0 0 2px #333333; filter: progid:dximagetransform.microsoft.chroma(color=#333333), progid:dximagetransform.microsoft.motionblur(strength=0, direction=0), progid:dximagetransform.microsoft.blur(pixelradius=2); color: transparent; }
here jsfiddle preview.
it works in ff, chrome , more or less in ie8, when testing in ie11, text invisible.
i know due color: transparent;
, if change color: rgba(0,0,0, 0.5);
, blur hardly visible.
i never thought have find fix ie11 opposed ie8, know of work around this?
ie10 , higher reads text-shadow text-shadow: xpx xpx #colour;
in other words, put syntax incorrectly. see here more info on correct usage text-shadow.
you put: .blur { text-shadow: 0 0 2px #333333; filter: progid:dximagetransform.microsoft.chroma(color=#333333), progid:dximagetransform.microsoft.motionblur(strength=0, direction=0), progid:dximagetransform.microsoft.blur(pixelradius=2); color: transparent; }
putting... .blur { text-shadow: 2px 2px 2px #333333; filter: progid:dximagetransform.microsoft.chroma(color=#333333), progid:dximagetransform.microsoft.motionblur(strength=0, direction=0), progid:dximagetransform.microsoft.blur(pixelradius=2); color: transparent; }
...seems fix issue.
you're welcome :)
Comments
Post a Comment