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.
 


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

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

  4. 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…

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

  6. 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 ?

Commenter

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

Presse-Citron 2005 - 2018 | A propos | Contact | Site hébergé par Cognix Systems | Informations sur les cookies