Mise à jour du tutoriel sur les ombrages en CSS3

Actualité par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (13615 lectures)
Tags : 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

Patidou a dit le

Pas convaincu, l'effet n'est pas bien rendu (IE6) et c'est pire sur un fond coloré. :-(

Simon-K a dit le

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...

Florent V. a dit le

Pour IE8 il me semble qu'il faut utiliser -ms-filter?

STPo a dit le

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 ?

Ladytron a dit le

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 :)

Tibo67 a dit le

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