Mise à jour du tutoriel sur les ombrages en CSS3

Actualitécss

Publié par le , mis à jour le (15467 lectures)

css xhtml filter

Le tutoriel consacré aux ombrages en CSS3 a été complété par une astuce suggérée par Ladytron, concernant Internet Explorer et le support de l'ombrage, plus précisément l'effet de halo.

Pour rappel, IE (version 8 comprise) n'implémente ni box-shadow ni text-shadow. Pour combler ces lacunes, on peut employer des filtres, dont Glow (filtre propriétaire donc forcément non valide).

La syntaxe :


    filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);

L'attribut Color désigne la couleur du halo.
L'attribut Strength désigne la taille de l'effet.

Voici une illustration : (Voir le résultat sur Internet Explorer)

ie-glow

Le rendu est loin d'être parfait... mais dans certains (rares?) cas il peut suffire.

Code utilisé :

Bien entendu, pour éviter de gêner les bons élèves, nous pouvons appliquer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.


<!--[if lte IE 8]>
  <style type="text/css">
  .ombrage {
			filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);
			zoom: 1;
		  } 
  </style>
<![endif]-->

Source : tutoriel consacré aux ombrages en CSS3

Source : http://msdn.microsoft.com/en-us/library/ms532995%28VS.85%29.aspx

Commentaires

C'est certain qu'en tant qu'infographiste, je n'utiliserai pas ce filtre car l'esthétique est plutôt douteuse ;). Mais bon on ne sait jamais, certaines personnes peuvent en avoir besoin et il a le "mérite" d'exister...

Ouch, c'est moche !
Je pense que dans 100% des cas, ce sera mieux sans =)
Sans parler des problèmes de perf engendrés par les filters, non ?

J'ai tendance à être entièrement d'accord : l'effet est effectivement d'un rendu assez "douteux", et aucune solution n'a été trouvée pour obtenir quelque chose de mieux (à part utiliser des valeurs faibles pour "strength").

Il est certain que la plupart du temps, on préférera ne pas avoir de halo pour IE plutôt qu'une chose donnant un genre de "nuage de pixels" ;) Peut-être que certains envisageront cette alternative, d'autres non… J'ai essayé, mais pas (du tout) adopté.

Pour IE8, la syntaxe "filter:…" fonctionne toujours :)

Coucou ! c'est pour mettre à jour la compatibilité navigateur : Opéra 10.53 affiche parfaitement le halo contrairement à ce qui est indiqué... il affiche aussi les .svg, affaire à suivre dans le design web

Commentaires clos