28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise la propriété text-shadow ainsi que son pendant filter pour les versions d'IE qui ne supportent pas la première.

Malheureusement le rendu son IE n'est vraiment pas à la hauteur: mon texte est parsemé de pixels noirs, c'est moche. Jugez plutôt la différence:

http://nsa34.casimages.com/img/2013/07/09/130709121818818527.jpg

Le css utilisé:

#titre_accueil h1{
	margin-bottom: 30px;
	padding: 5px;
	border: none;
	color: #CBE6F4;
	font-size: 28px;
	font-weight: normal;
	text-shadow: 1px 1px 1px #1A5F83;
	filter:progid:DXImageTransform.Microsoft.Shadow(color='#1A5F83', Direction=135, Strength=2); /* IE8 */
}


Existe-t-il un moyen de faire autrement pour appliquer une ombre à un texte pour IE ?
Modifié par Antonio (09 Jul 2013 - 12:15)
Bonsoir,

Le filtre ne te donnera pas le même rendu sur IE que sur les autres navigateurs, c'est ainsi Smiley ohwell
Tu peux éventuellement passer par JavaScript, certains disent que les résultats sont probants (je n'ai pas IE sous la main pour donner mon propre avis)
Si d'aventure ton site charge déjà la blibliothèque Jquery, il existe ce plugin :PastelShadow(d'autres sûrement...), je ne l'ai pas testé, à voir...
Ou laissé courrir...
Merci pour ta réponse.

J'ai installé PastelShadow, je ne trouve pas l'effet transcendant, en plus le changement de couleur de l’ombre ne fonctionne pas. Smiley confus .

Je me demande si je vais pas laisser comme ça, tant pis pour ceux qui ont un vieux IE...
Tu aurais une capture d'écran ? Une page en ligne pour celles et ceux qui ont IE<9 puissent se faire un avis ?
Laisser courir est une prise de position comme une autre Smiley cligne
Pas de page en ligne mais j'ai fait une capture d'écran de l'ombre donnée par PastelShadow (réalisée avec IE8 sous XP):

http://nsa33.casimages.com/img/2013/07/09/130709122128723120.jpg

C'est pas aussi dégueu que la propriété filter mais cela me semble plus terne qu'avec text-shadow.

Le code JS de PastelShadow utilisé pour ceux que ça intéresse:

 jQuery(window).ready(function(){
            jQuery(".pastelShadow").PastelShadow(
                {
                    x: 2,
                    y: 1,
                    blur: 1,
                    color: "#1A5F83"
                }
            );
        });


A noter que la couleur de l'ombre ne correspond pas, cela donne du gris alors que j'ai choisi du bleu (problème donc à moins que ça soit lié à ma configuration...)
Modifié par Antonio (09 Jul 2013 - 12:17)
Merci de ce retour.
Bon, a priori, cela semble tout de même sensiblement améliorer les choses, non ?
Après, ce n'est, en effet, peut-être pas problématique de laisser tomber les navigateurs qui ne supportent pas ces "petits artifices cosmétiques", d'autant plus s'il est question de rajouter du poids, du temps de chargement, etc... à tes pages, et si JavaScript (ou l'utilisation de bibliothèques JavaScript) ne servent qu'à cela.