Un effet d’ombré en CSS très simple à réaliser

En général cet effet est réalisé à l’aide d’un logiciel graphique ce qui limite son utilisation à des titres en images.Voici une façon de le réaliser à l’aide d’un style tout simple et qui vous permettra par conséquent de l’appliquer à du texte, statique ou dynamique.L’astuce consiste à jouer avec les valeurs absolues et relatives

En général cet effet est réalisé à l’aide d’un logiciel graphique ce qui limite son utilisation à des titres en images.
Voici une façon de le réaliser à l’aide d’un style tout simple et qui vous permettra par conséquent de l’appliquer à du texte, statique ou dynamique.
L’astuce consiste à jouer avec les valeurs absolues et relatives d’une balise <span> sur une balise <h> :

h3 {
     color: #000;
     position: relative;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     }

h3 span {
     color: #999999;
     display: block;
     position: absolute;
     top: -1px;
     left: -1px;
     
     }

Et le texte dans les balises qui vont bien :

<h3><span>Un effet d’ombré en CSS très simple à réaliser</span>Un effet d’ombré en CSS très simple à réaliser</h3>

Ce qui donne :

Trouvé ici et un peu modifié par votre serviteur.
 


Nos dernières vidéos

23 commentaires

  1. C’est contraire à l’esprit de la séparation contenu/présentation puisque le texte doit être répété deux fois.

    Ca réduit l’accessibilité puisque un lecteur d’écran lira le texte deux fois.

    Et pour le référencement ça pourrait être considéré éventuellement comme une tentative de spam.

    A oublier AMHA…

  2. Les spécialistes ont parlé, et c’est plutôt bien vu, je n’avais pas pensé à tout ça !
    Ok ok vous avez gagné les gars, je le range 😉

  3. Comme le dit Rob dans son commentaire sur l’article original (jimwhimpey.com/blog/2006/… une meilleure façon serait d’utiliser javascript pour dupliquer le contenu.

    Toutefois, cela ne règle pas le problème pour ceux qui utilisent un lecteur d’écran avec javascript activé.

    Le mieux serait peut être de ne pas ombrer le texte et trouver une autre astuce de mise ne page ! 🙂

  4. @Jonathan : CSS intègre dejà cela depuis 98. Ca s’appelle text-shadow et ca marche…

    … que sur Safari sur OSX. Même Firefox ne l’implémente pas 🙁

    Autrement dit, on peut déjà affubler sa feuille de style avec text-shadow. Les sites ne pourront que s’embellir dans le futur…

  5. Bon, je me suis fait grillé sur tous les plans, qu’il s’agisse de l’accessibilité comme des futures possibilités de CSS3 notamment avec une propriété qui répond (je crois) au nom de text-shadow. Sur ce, je remballe. 😉

  6. moi ce qui me fait rigoler c’est qu’Eric nous montre le résultat avec un bon vieux GIF. Belle mise en application ! LOL

  7. héhé… je l’attendais celle-là 🙂
    Tout simplement parce-que c’était bien plus rapide de faire une capture en gif que d’aller modifier la CSS du blog ou d’ne créer une autre juste pour ça vu que les balise <h> ont déjà toutes leur propre classe

  8. oui évidemment.

    Et sinon dans un <div>,

    <h3 style="color: #000;position: relative;font-family:Verdana, Arial, Helvetica, sans-serif;"><span style="color: #999999;display: block;position: absolute;top: -1px;left: -1px;">Un effet d’ombré en CSS très simple à réaliser</span>Un effet d’ombré en CSS très simple à réaliser</h3>

    Enfin moi je dis ça…

  9. Une autre solution, qui ne duplique pas réellement le contenu, c’est d’utiliser un attribut ‘title’ dans la balise et de jouer avec after ou before dans le CSS. C’est au top sur tous les plans… sauf que ça ne passe pas encore sous IE qui n’implémente pas l’after/before…
    Pour plus de détails, c’est sur alsacreations :
    css.alsacreations.com/Tut…

    A titre perso, j’utilise à peu près la même chose, sauf que je duplique en javascript juste pour IE (ça évite un trop mauvais référencement)… en attendant une évolution du côté de Microsoft.

  10. Hum…
    Je crains un peu la librairie IE7… J’avais essayé, mais je la trouve un peu lourde pour le peu de choses dont je me sers. Mais ce n’est qu’un avis perso.

  11. Trop compliqué pour un résultat hem.. "merdique"..
    Ce qui me choque le plus, c’est surtout qu’il n’y a aucun antialiasing, mais ce doit etre une question d’habitude.. (Aie ! pas frapper !)
    Au fait, Vista proposera t’il l’antialiasing comme affichage par défaut ?

  12. Vous êtes bien dur avec Eric!! Quand on a un texte que le client veut absolument écrire en jaune sur fond blanc, c’est bien pratique! En attendant CSS3, on peut faire quelques entorses, pourvu de ne pas en abuser.

  13. Bonjour,
    Je trouve que certains juge hâtivement un effet qui pourrait paraître au premier abord hasbeen mais utiliser dans un contexte, cela relève le texte et procure une finition à celui-ci : http://abduzeedo.com/
    Bonne continuation 😉

Send this to a friend