Connect with us
Bouygues

Internet

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

Il y a

le

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.
 

23 Commentaires

23 Commentaires

  1. Sébastien Billard

    1 décembre 2006 at 17 h 34 min

    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. Davide

    1 décembre 2006 at 17 h 41 min

    Je suis d’accord avec Sébastien, et en plus je trouve ça moche 🙂

    Désolé

  3. Snakeboudoir

    1 décembre 2006 at 17 h 42 min

    + 1 pour Sébastien

    En revanche, il faut avouer que l’astuce est en effet à la fois efficace et simplissime…

  4. Eric

    1 décembre 2006 at 17 h 46 min

    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 😉

  5. lOulOu

    1 décembre 2006 at 18 h 02 min

    Hum … un peu naze comme truc.

  6. David

    1 décembre 2006 at 18 h 19 min

    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 ! 🙂

  7. Jonathan Loriaux

    1 décembre 2006 at 18 h 54 min

    Le meilleure solution … sera dans une future version de CSS .. que les navigateurs intégreront deux ans plus tard (et je suis optimiste)

  8. seb

    1 décembre 2006 at 21 h 05 min

    @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…

  9. Deeder

    1 décembre 2006 at 21 h 06 min

    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. 😉

  10. effisk

    2 décembre 2006 at 0 h 21 min

    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

  11. Eric

    2 décembre 2006 at 7 h 38 min

    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

  12. effisk

    2 décembre 2006 at 14 h 28 min

    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…

  13. grand-mister

    2 décembre 2006 at 21 h 27 min

    Le problème accessibilité/référencement peut être éventuellement résolu en générant le double avec du javascript, non ?

  14. Serge

    3 décembre 2006 at 14 h 15 min

    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.

  15. grand-mister

    4 décembre 2006 at 12 h 45 min

    A ce moment là, utilise le hack javascript qui permet à IE d’interpréter les before/after et autres joyeusetés.
    dean.edwards.name/IE7/

  16. Serge

    4 décembre 2006 at 16 h 21 min

    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.

  17. blazouf

    7 décembre 2006 at 13 h 07 min

    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 ?

  18. Philight971

    12 décembre 2006 at 17 h 16 min

    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.

  19. Code 007

    22 février 2009 at 22 h 03 min

    Salut, y’a aussi un script pas mal en css et javascript mais pour les ombres images, voir sur http://www.netzgesta.de/instant/

  20. thvi

    15 novembre 2009 at 21 h 15 min

    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 😉

  21. sacapuss

    28 février 2010 at 23 h 55 min

    Merci pour cette idee tres interessante.

  22. jjjn

    5 mars 2010 at 3 h 50 min

    @sacapuss depuis le temps, la fonction d’ombrage existe en CSS, quelques essais ici: http://greeen.eu/2010/03/jouer-avec-les-effets-dombre-en-css/

  23. reflectim : agence web

    14 décembre 2011 at 18 h 06 min

    L’idée et bonne mais c’est vrai que le reférencement ça ne le fait pas du tout, puis un difficile à gérer (coté client) avec un CMS.
    Merci pour l’article tout de même.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Dernières news

Les bons plans

Les tests