28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise la propriété box-shadow avec ses différentes syntaxes de compatibilité pour les navigateurs dont le filter pour ie.

Celui-ci marche bien la plupart du temps. Cependant, je viens d'avoir le cas où le filter opère sur tous les enfants textes de la box sur laquelle je l'ai définie, sauf sur celle-ci !

Avez-vous déjà eu ce bug ?

Smiley biggrin Merci par avance pour vos réponses
Bonjour,

il te faut appliquer une couleur de fond (ou image) pour cacher l'ombre des textes.
autant avec shadow que dropshadow.

<edit> et il te faut une bordure pour que la boite te fasse une ombre et le layout

.shadow peut-etre multiple , dropshadow non</>

GC
Modifié par gc-nomade (29 Oct 2010 - 14:33)
Florent V. a écrit :

Tu veux dire que les ombres sont sur le texte plutôt que sur des boites? Tu ne t'es pas tout simplement plantée de syntaxe?

Non c'est la bonne syntaxe. En relisant la doc de microsoft justement j'ai vu ces 2 exemples :

http://samples.msdn.microsoft.com/workshop/samples/author/filter/Shadow.htm
http://samples.msdn.microsoft.com/workshop/samples/author/filter/shortSamples/shadowEX1.htm

Ils montrent bien mon problème.

Appliquer une couleur de fond n'est pas possible car ce ne serait pas évolutif.

Merci pour vos réponses en tous cas !
gc-nomade a écrit :

Bonjour,

il te faut appliquer une couleur de fond (ou image) pour cacher l'ombre des textes.
. . .

Cacher n'est certe pas une solution pro en informatique.

Ce qui est cacher aux yeux des utilisateurs n'est pas cacher au processeur. L'ombre serait donc calculer à l'exécution. Par principe nous ne devons pas laisser au processeur le calcule d'un élément cacher, c'est inutile. Soit un élément existe, soit il n'existe pas.

Nous nous éloignons de l'optimisation. Plusieurs propriétés sont mal utilisé à cette fin : visible et alpha plus particulièrement, qui cache l'objet à nos yeux, mais l'objet existe encore à l'exécution.

En informatique, un objet qui n'est pas utilisé, un objet qui n'est pas visible, n'a aucune raison d'exister. Mais de grâce n'utilisons jamais des astuces de camouflage.

Soyons pro, soyons propre. Smiley cligne

++
zardoz a écrit :

Cacher n'est certe pas une solution pro en informatique.

Ce qui est cacher aux yeux des utilisateurs n'est pas cacher au processeur. L'ombre serait donc calculer à l'exécution. Par principe nous ne devons pas laisser au processeur le calcule d'un élément cacher, c'est inutile. Soit un élément existe, soit il n'existe pas.

Nous nous éloignons de l'optimisation. Plusieurs propriétés sont mal utilisé à cette fin : visible et alpha plus particulièrement, qui cache l'objet à nos yeux, mais l'objet existe encore à l'exécution.

En informatique, un objet qui n'est pas utilisé, un objet qui n'est pas visible, n'a aucune raison d'exister. Mais de grâce n'utilisons jamais des astuces de camouflage.

Soyons pro, soyons propre. Smiley cligne

++


soit , donc pas de filtre shadow si le comportement de base ne convient pas . Cacher n'est probablement pas le terme le plus adapté mais semble avoir été bien compris.(troll du Vendredi ?)

Ce filtre permet au choix :
1) d'appliquer une ombre aux bordures(border css) et uniquement aux bordures si un fond de couleur est appliquée (color+background-color Smiley cligne
evidement les png opaque ou couleur rgba() laisseront entrevoir l'ombrage des textes).
2) d'appliquer une ombre aux bordures et aux textes sans fond de couleur appliqué a l'element.
3) d'appliquer une ombre aux textes uniquement si il n'y pas de bordures (border css) appliqué aux éléments concerné.

IE nous a tous déjà bien habitué a ces défauts ou travers Smiley smile .

Si une couleur de fond (celle de body ou parent directe par exemple) ne peut-etre appliquée, alors IE se passera des effets d'ombrage sans que l'internaute sache qu'il manque un "quelque chose", méthode bien connu sur ce forum.
Pour ne pas trop te lâcher et comme vendredi s'en va ,
as tu un morceau de code html a nous montrer ainsi que les éléments auquel tu appliques ces filtres ?
Un reflow css sur certains elements suffirait a eliminé cet effets de bord si il n'y a pas d'incompatibilité avec d'autres elements ... a l'instar d'un display:inline pour les bugs de marges sur les flottants par exemple.

(samedi - 5 minutes) ...
Merci !!

Ne voulant pas passer pas des hacks ou des solutions non évolutives, j'ai appliqué un style plus simple à IE.

Il est juste intéressant de garder à l'esprit ces bugs IE avec le filter box shadow.

Bonne journée !