css3 text-shadow dans IE9

Question

Est-il un moyen facile d'avoir css3 text-shadow's de travail dans IE9? Au moins une seule ombre au texte serait génial. Je suppose idéalement IE8 est pris en charge. J'espère qu'il y a un simple plugin jquery ou .htc fichier qui regarde juste à text-shadow propriété css d'un élément et la met en œuvre, pour IE9.

Answer 1

Oui, mais pas de la façon dont vous l'imaginez. Selon caniuse (une très bonne ressource) il n'y a aucun soutien et aucune polyfill disponible pour l'ajout d' text-shadow soutien à IE9. Toutefois, IE a leur propre ombre du texte (détaillé ici).

Exemple de mise en œuvre, la prise de site web (fonctionne dans IE5.5 à IE9):

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

Pour la compatibilité inter-navigateur et la pérennité de code, n'oubliez pas d'utiliser la norme CSS3 text-shadow de la propriété (détaillé ici). Cela est particulièrement important étant donné que IE10, a officiellement annoncé leur intention de déposer, pour l'héritage dx filtres. À l'avenir, IE10+ support de la norme CSS3 text-shadow.

Answer 2

Que IE9 ne prend pas en charge CSS3 text-shadow,, je voudrais juste utiliser le filtre de propriété pour IE à la place. Live exemple: http://jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

peut être remplacé par

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

Vous pouvez obtenir des résultats très similaires.

Answer 3

Essayez Générateur de CSS.

Vous pouvez choisir des valeurs et de voir les résultats en ligne. Ensuite, vous obtenez le code dans le presse-papiers.
C'est un exemple de code généré:

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);

Answer 4

Je cherchais un cross-browser texte-avc solution qui fonctionne quand superposées à des images d'arrière-plan. je pense avoir une solution pour ce qui n'implique pas extra une marque, js et travaille dans IE7-9 (je n'ai pas testé 6), et ne cause pas de problèmes d'aliasing.

C'est une combinaison de l'utilisation de CSS3 text-shadow, qui a un bon soutien sauf IE (http://caniuse.com/#search=text-shadow), puis à l'aide d'une combinaison de filtres pour IE. CSS3 text-stroke de soutien est faible pour le moment.

IE Filtres

Le filtre de rayonnement (http://www.impressivewebs.com/css3-text-shadow-ie/) l'air terrible, donc je n'ai pas l'utiliser.

David Hewitt réponse impliqués ajoutant dropshadow filtres dans une combinaison de directions. ClearType est ensuite retiré malheureusement on se retrouve donc avec mal aliasé texte.

J'ai ensuite combinées certains des éléments proposés sur useragentman avec le dropshadow filtres.

De les mettre ensemble

Ce serait par exemple de texte en noir avec un trait blanc. Je suis l'aide de html conditionnel classes par la façon de cibler IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Answer 5

J'ai essayé les filtres mentionnés ci-dessus, fortement et n'aimait pas l'effet qu'il a créé. Je n'ai pas envie d'utiliser tous les plugins depuis qu'ils avaient ralentir le temps de chargement pour ce qui semble un effet de base.

Dans mon cas, je cherchais un texte de l'ombre avec un 0px flou, ce qui signifie que l'ombre est une réplique exacte du texte, mais juste d'offset et de derrière. Cet effet peut être facilement reproduites avec jquery.

<script>
    var shadowText = $(".ie9 .normalText").html();  
    $(".ie9 .normalText").before('<div class="shadow">' + shadowText + '</div>');
</script>
<style>
    .ie9 .shadow { position: relative; top: 2px; left: -3px; }
</style>

Cela va créer un effet identique à l'css3 text-shadow ci-dessous.

    text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);

voici un exemple de travail (voir le texte en blanc sur l'image de la bannière) http://www.cb.restaurantconnectinc.com/