Suivez le fil RSS
 

Mise à jour du tutoriel sur les ombrages en CSS3

Actualité par Simon-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)
Mis à jour le 23 Février 2010. 7563 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 2010-02-23 11:50:31

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

Simon-K a dit le 2010-02-23 12:16:19

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 2010-02-23 14:13:09

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

STPo a dit le 2010-02-23 18:49:48

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 2010-02-24 11:35:35

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 2010-05-29 01:39:00

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