[résolu ou presque ]Texte ombré

Bonjour à tous,

j'ai suivi le tutoriel css alsacreations pour la création d'un titre en ombré, FFox et Safari ok mais IE... aie...

Quelqu'un a une piste.

La page en question est visible :
http://www.alarenverse.com/demo/

le css

h1, span {letter-spacing:-1px;font-weight:100;line-height:1.05;font-size:18px;padding-left:10px}
h1{position: relative;color:gray;line-height:1.05; border-left:2px solid #003366}
h1 span {position: absolute;top: -2px !important;left: -2px!important;left: -0.2em; top:-1px;color:#BDEE02;}

J'ai un peu magouillé mais ça ne change rien...

Merci de votre aide,
Aurélia.
Modifié par Fugugirl (04 Jun 2007 - 16:37)

Salut,

Pourquoi n'essayes tu pas de remplacer ce texte ombré par un *.gif ?
(<span>)

Cela va t'éviter des problèmes de compatibilité de browser, n'est ce pas ?

++
Modifié par Nolem (04 Jun 2007 - 01:04)

Bonsoir,
avant de te lancer dans ce genre d"effet, tu dois te demander ce que cela apporte réellement à l'utilisateur et si cela ne constitue pas une atteinte à l'accessibilité, la compréhension ou à l'ergonomie de ton document.
Dans le cas présent, tu as 2 éléments <h1> qui font en faite parti du même titre, ce qui n'est pas logique en therme de structuration.
Voila quelles peuvent en être les conséquences :
Sur un navigateur textuel (lynx par exemple) ou en cas de désactivation de CSS, le même mot sera affiché 2 fois (l'un aprés l'autre)
(BIENVENUEBIENVENUE - SUR LE SITE DE ABZ.DÉMÉNAGEMENTSUR LE SITE DE ABZ.DÉMÉNAGEMENT)
Les lecteurs d'écrans (logiciels de synthèse vocale pour les déficient visuels) liront tous ces mots les uns à la suite des autres, et de même pour les moteurs de recherche etc.
Dans l'idéal, une ombres portée d'un texte à lire exige beaucoup de sobriété pour ne pas dénaturer l'esthétique d'une lettre et obtenir un effet qui fait oublier la présence de cette ombre. Ici cela n'améliore pas la lisibilité.
Modifié par Hermann (04 Jun 2007 - 09:52)

Hmm, tiens je crois que je vais bientôt passer ce tuto à la trappe

Pas taper !! Je tentais de trouver une solution "simple" pour faire une mise à jour facile d'un titre avec un effet sans que ce soit une image.

Apparemment ce n'est pas ce qui fonctionne le mieux. Merci de vos réponses. Je vais peser le pour et le contre.

Bonne semaine à tous,
Aurélia.

... et puis y'a vachement plus simple :

h1{
  text-shadow: #000 0px 0px 5px;
}

bon ok, ça se voit que sous Safari, mais ça en jete
Modifié par MrPatate (04 Jun 2007 - 11:02)

MrPatate a écrit :
... et puis y'a vachement plus simple :

h1{
  text-shadow: #000 0px 0px 5px;
}

bon ok, ça se voit que sous Safari, mais ça en jete

Inutile puisque cette propriété a été supprimée de CSS2.1
Modifié par Hermann (04 Jun 2007 - 11:56)