[Résolu] Ombre, relief, empreinte sur un caractère

Bonjour,

Je cherche à mettre une ombre, mettre en relief ou empreinte certains caractères.
CSS3 semble offrir cette possibilité avec un code du style :

text-shadow: 1px 1px 0px #black;

Problème : mon site n'utilise pas CSS3 et n'est pas appelé à y passer vu le boulot que ça représenterait (et les compétences nécessaires que je n'ai pas).

J'en reste donc au CSS "classique" mais pas moyen de trouver la moindre piste car mes recherches sont polluées par toutes les références à CSS3.

Donc, existe-t-il un moyen d'obtenir cet effet ou dois-je passer par une image ?

Merci de vos lumières

Bonjour,

text-shadow fait partie de la recommandation css2 datant de 1998 dont voici la liste des propriétés...

IE ne le supporte pas encore, mais en regardant de ce côté tu trouveras une solution.

Si jamais ça ne te convient pas, il faudra passer par une solution image ou script, malheureusement.

Bonne continuation !

Black Hole Sun

a écrit :
Problème : mon site n'utilise pas CSS3 et n'est pas appelé à y passer vu le boulot que ça représenterait (et les compétences nécessaires que je n'ai pas).

J'en reste donc au CSS "classique"

Que veux-tu dire par là ? Il n'y a pas d'équivalent du doctype en CSS t'interdisant de passer de CSS 2.1 à CSS3, tu peux utiliser indifféremment des propriétés et valeurs CSS 2.1 et CSS3. Si tu souhaites apporter à ton site des améliorations qui relèvent de CSS3 coins arrondis, dégradés, blocs ombrés, etc.), demande, on doit pouvoir t'apporter des réponses.
Modifié par thierry (26 Sep 2012 - 21:07)

Bonjour,

Merci Ten et Thierry.

@Thierry : je pensais que le CSS3 était lié à un DOCTYPE.
Je suis autodidacte et je ne connais que ce que j'ai déjà eu à traiter : pour situer le niveau, j'ai pesté contre le tuto Alsacréation sur l'usage de @fontface parce qu'il est indiqué nulle part où placer les fichier des fontes dans l'arborescence du site (j'ai fini par trouver, mais il était déjà tard ).


@Ten : j'ai réussi à obtenir le résultat désiré sachant qu'il est un peu plus complexe que les exemples de base.
Donc mon code à l'heure actuelle :

<p align="center"><img style="width: 107px; height: 51px;" alt="" src="logo.png" />
<span style="text-align: right; font-weight: bold; font-style: italic; color: white; font-size: 5em; text-shadow: 4px 0px 2px #000000, -4px 0px 2px #000000, 0px 4px 2px #000000, 0px -4px 2px #000000; font-family: redressedregular;">&nbsp;RC Classics&nbsp;&nbsp;</span>
<span style="text-align: right; font-weight: bold; color: white; font-size: 5em; text-shadow: 4px 0px 2px #000000, -4px 0px 2px #000000, 0px 4px 2px #000000, 0px -4px 2px #000000; font-family: verdana;">&amp;</span>
<span style="text-align: right; font-weight: bold; color: white; font-size: 5em; text-shadow: 4px 0px 2px #000000, -4px 0px 2px #000000, 0px 4px 2px #000000, 0px -4px 2px #000000; font-family: orbitronbold;">&nbsp;Moderns </span>
<span style="text-align: right; font-weight: bold; font-style: italic; color: black; font-size: 1em; text-shadow: 2px 0px 2px #FFFFFF, -2px 0px 2px #FFFFFF, 0px 2px 2px #FFFFFF, 0px -2px 2px #FFFFFF;  font-family: verdana;">by Black Hole Sun</span></p>

Désolé si j'égratigne les yeux des puristes. Petites explications :
- je passe le code dans ma page php et non dans le CSS car j'ai plusieurs éléments sur la même ligne qui doivent recevoir des formatages différents. Or j'ai pu m'apercevoir que les balises <h#> provoquent un retour à la ligne (et je n'ai plus de h dispo, sauf le 1).
- je multiplie les directions d'ombrage pour entourer les lettres car j'ai besoin de contraster au mieux le texte du fond sur lequel il sera plaqué.

Bref, mon code est W3C compliant et donne le résultat souhaité dans Chrome, FF et Safari. Forcément, ça ne marche pas dans IE ... et je ne trouve pas comment appliquer l'adaptation pour IE.
Dans le tuto Alsacréations, j'avoue d'ailleurs avoir du mal à déterminer si les exemples de code fourni sont à mettre dans la feuille CSS ou directement dans le code html.
J'ai réussi à adapter la partie text-shadow à mon code malgré les changements de formats sur la ligne. Mais pour le patch IE, je ne vois pas du tout par quel bout attaquer.

Merci de votre aide

En sortant le nez de mon code pour le coller ici, j'ai l'impression que c'est une énorme usine à gaz (sans compter l'ajout de ce qu'il faudrait pour IE).

Serait-il plus avisé de passer par une image transparente PNG à plaquer sur les bandeaux qui servent de logo pour mon site ?

Je m'auto-réponds après des tests de rendu sous différents navigateurs.
Seuls Chrome et Safari affichent correctement ce que j'ai codé.
Firefox se loupe sur le positionnement vertical et l'intégration de police.
Internet Explorer se loupe sur les ombrages et a une manière bien à lui de faire le rendu de police (notamment l'espacement entre les caractères).

Bref, la cacophonie habituelle des standards qui ne sont respectés que de la manière dont ça arrange chacun. Ca devient saoûlant. A se demander pourquoi se prendre le chou à respecter des standards que personne n'utilise

Je sens que ma prochaine bannière sera : "Ce site est codé pour Chrome. Si vous avez des problèmes d'affichage avec un autre navigateur, installez Chrome et revenez. Sinon faites avec."