web-dev-qa-db-fra.com

CSS3 texte-shadow dans IE9

Existe-t-il un moyen facile d’avoir css3 text-shadow travaille dans IE9? Au moins une seule ombre de texte serait géniale. Je suppose qu'idéalement, IE8 est également supporté. J'espère qu'il existe un simple plugin jquery ou un fichier .htc qui se contente de regarder la propriété text-shadow css d'un élément et de le mettre en œuvre pour IE9.

cssinternet-explorer-9css3piecss3
52
at.

Oui, mais pas comment vous imaginez. Selon caniuse (une très bonne ressource), il n’existe aucun support ni possibilité de remplissage pour l’ajout de text-shadow support pour IE9. Cependant, IE a sa propre ombre de texte propriétaire ( détaillé ici ).

Exemple de mise en œuvre, tiré de leur site Web (fonctionne dans IE5.5 à IE9):

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

Pour la compatibilité entre navigateurs et la pérennité du code, n'oubliez pas d'utiliser également le standard CSS3 text-shadow propriété ( détaillé ici ). Ceci est particulièrement important compte tenu du fait que IE10 a officiellement annoncé son intention de supprimer le support des filtres dx hérités . IE10 + ne supportera que le standard CSS3 text-shadow.

60
Moses

Comme IE9 ne supporte pas CSS3 text-shadow, Je voudrais simplement utiliser la propriété filter pour IE à la place. Exemple en direct: 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.

26
tw16

Essayez Générateur CSS .

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

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

Je recherchais une solution de traçage de texte inter-navigateurs qui fonctionne lorsqu'elle est superposée à des images d'arrière-plan. pense que j'ai une solution pour cela qui n'implique pas de marge supplémentaire, js et fonctionne dans IE7-9 (je n'ai pas testé 6), et ne provoque pas de problèmes d'aliasing.

Ceci est une combinaison de CSS3 text-shadow, qui a un bon support sauf IE ( http://caniuse.com/#search=text-shadow ), puis, en utilisant une combinaison de filtres pour IE, la prise en charge des traits de texte CSS3 est médiocre pour le moment.

Filtres IE

Le filtre de rayonnement ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) a l'air horrible, je ne l'ai donc pas utilisée.

réponse de David Hewitt impliquait l'ajout de filtres gouttes dans une combinaison de directions. ClearType est ensuite supprimé malheureusement et nous nous retrouvons avec du texte mal aliasé.

J'ai ensuite combiné certains des éléments suggérés sur seragentman avec les filtres dropshadow.

Assemblage

Cet exemple serait un texte noir avec un trait blanc. J'utilise des classes html conditionnelles pour 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;
}
5
crdunst

J'ai essayé les filtres référencés ci-dessus et ai fortement détesté l'effet qu'il a créé. Je ne voulais pas non plus utiliser de plug-in, car ils ralentiraient le temps de chargement pour ce qui semble être un effet de base.

Dans mon cas, je recherchais une ombre de texte avec un flou 0 pixels, ce qui signifie que l’ombre est une réplique exacte du texte mais qu’elle est simplement décalée et postérieure. Cet effet peut être facilement recréé 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 créera un effet identique à l'ombre de texte css3 ci-dessous.

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

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

1
tbradley22

La réponse de crdunst est assez soignée et la meilleure réponse que j'ai trouvée, mais il n'y a aucune explication sur la façon d'utiliser et le code est plus gros que nécessaire.

Le seul code dont vous avez besoin:

#element {
    background-color: #cacbcf;
    text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
    filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}

D'abord vous [~ # ~] devez [~ # ~] spécifier un background-color - si votre élément doit être transparent, copiez simplement la couleur d’arrière-plan du parent ou laissez-le hériter. La couleur au niveau du filtre couleur doit correspondre à la couleur de fond pour corriger les artefacts autour du texte (mais ici, vous devez copier la couleur, vous ne pouvez pas écrire inherit). Notez que je n'ai pas raccourci le dropshadow-filter - cela fonctionne, mais les ombres sont ensuite coupées aux dimensions de l'élément (visible avec de grandes ombres; essayez de régler les décalages sur au moins 4).

CONSEIL: Si vous souhaitez utiliser des couleurs avec transparence (canal alpha), écrivez dans une notation # AARRGGBB , où AA représente une valeur hexadezimale de l'opacité - de 01 à FE, car FF et, ironiquement, 00 signifie également aucune transparence et est donc inutile. ^^ Il suffit d'aller un peu plus bas que dans la rgba notation parce que les ombres ne sont pas molles et la même valeur alpha apparaît alors plus sombre. ;)

Un bon extrait de code pour convertir la valeur alpha pour IE (JavaScript, il suffit de le coller dans la console)):

var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);

PROBLÈMES: Le texte/la police se comporte comme une image après l'application de l'ombre. cela devient pixelisé et flou après le zoom avant ... Mais c'est le problème d'IE, pas le mien.

Démo en direct de l’ombre ici: http://jsfiddle.net/12khvfru/2/

0
Dennis98