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.
📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.
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…
Je suis d’accord avec Sébastien, et en plus je trouve ça moche 🙂
Désolé
+ 1 pour Sébastien
En revanche, il faut avouer que l’astuce est en effet à la fois efficace et simplissime…
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 😉
Hum … un peu naze comme truc.
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 ! 🙂
Le meilleure solution … sera dans une future version de CSS .. que les navigateurs intégreront deux ans plus tard (et je suis optimiste)
@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…
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. 😉
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
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
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…
Le problème accessibilité/référencement peut être éventuellement résolu en générant le double avec du javascript, non ?
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.
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/
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.
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 ?
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.
Salut, y’a aussi un script pas mal en css et javascript mais pour les ombres images, voir sur http://www.netzgesta.de/instant/
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 😉
Merci pour cette idee tres interessante.
@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/
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.