[Résolu] Effet de lettre creuse avec CSS ?

bonjour,

est-il possible de creer un effet de lettres creuses avec les CSS
un shadow inversé ?

merci pour vos lumières !

++
Modifié par billboc (23 Sep 2010 - 11:50)

en CSS2, tu peux peut être bricoler un truc avec :
- 2 fois le même texte dans 2 divs
- tu positionnes la 2nde pour la mettre au dessus de la première
- tu aggrandis la font-size de la première
- tu leur donnes 2 couleurs proches mais différentes

si tu veux un dégradé, il faut empiler encore plus de textes les uns sur les autres

Bonjour,

Par contre, la solution de jpvincent implique de multiplier le même texte plusieurs fois, ce qui risque d'être un désastre pour un lecteur d'écran ou un robot d'indexation.

Il est préférable de chercher une autre solution (peut-être en CSS3, peut-être en Javascript ou autre).

oui c'est du coté du CSS3 que je cherche mais sans résultats pour le moment...

Merci pour cette 1ère idée en tous cas !

Bonsoir,
je doute que CSS3 permette d'obtenir une ombre interne, la propriété text-shadow n'agit qu'à l'extérieur de la lettre.

Hello,

Petite question, à quelle fin recherches tu cet effet? Juste pour un titre ou pour toute la typo d'un site?

EDIT: Sinon, certaines polices permettent ce rendu avec @font-face, ex http://www.fontsquirrel.com/fontfacedemo/Comic-Zine-OT mais je doute que tu trouves celle de ton choix en particulier...
Modifié par Florian_R (19 Aug 2010 - 20:00)

Salut,

text-shadow en CSS3 permet par illusion d'optique d'obtenir un effet assez correct sous certaines conditions. Je m'explique.

Il faut, pour que ça marche, faire une ombre légère (à vue de pif 1px sur un texte normal, 2 ou 3px sur un texte plus grand, 4 ou 5 px sur un très gros texte).

Il suffit de placer l'ombre en haut à gauche. Puisque la convention veut que l'ombre "classique" soit portée en bas à droite, la placer comme ça donne une impression de "creusé". Donc il te suffit de mettre ton ombre à -2px sur les deux axes, par exemple, et ça devrait rendre correctement.

À tester bien sur pour voir si ça passe dans ton design...

Pour ma part j'applique un text-shadow en bas à droite, mais avec une ombre plus claire que le texte ainsi que le fond (la lumière provenant par convention du coin en haut à gauche, elle se reflète le bord opposé; mais dans ce cas le fond de la page ne doit pas être totalement blanc)

exemple :
http://www.oudinmarbrerie.ch/art_funeraire/img/artfuneraire/mini_Oudin_11.jpg
http://img541.imageshack.us/img541/1115/screenshot18082010b.jpg
Modifié par darkstar2023 (19 Aug 2010 - 21:17)

En effet, ta proposition est complémentaire à la mienne, tout dépend de la couleur de fond. Et si la couleur de fond est en plein milieu... on teste les deux et on voit ce qui fonctionne

je recherche cet effet pour un titre de blog !

est-ce que darkstar pourrait me donner un exemple de css, car tes copies d'écran (merci) sont exactement ce que j'aimerai faire !

merci beaucoup

PS: je viens de tomber sur un lien interressant dont je vous fais part

text-shadow
Modifié par billboc (19 Aug 2010 - 22:31)

Hello,

Ta question m'interessait et les solutions proposées au dessus me semblaient de bonnes idées, j'ai voulu creuser un peu.

J'en suis arrivé à la conclusion que si ton texte est clair, il te suffit de rajouter une petite ombre foncée en haut, si ton texte est foncé, il te faut en rajouter une subtile claire en bas.

J'ai aussi trouvé une autre solution au rendu plus joli à base de :after, mais qui nécessite un markup un peu spécial et pourrait ne pas fonctionner dans ton cas. Si ca t'interesse, j'en parle ici.

L'idée est de positionner un element qui contient le même texte par dessus, légerement décalé et partiellement transparent.
Modifié par Tymlis (19 Aug 2010 - 23:45)

intéressant merci beaucoup !

billboc a écrit :
je recherche cet effet pour un titre de blog !

est-ce que darkstar pourrait me donner un exemple de css, car tes copies d'écran (merci) sont exactement ce que j'aimerai faire !

merci beaucoup

PS: je viens de tomber sur un lien interressant dont je vous fais part

text-shadow

Voici le bout de code pioché sur la source de mon site

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

Le texte étant de couleur #555 sur fond #ddd

Pour encore faire mieux tu peux éventuellement mettre un fond "métal brossé", qui peut accentuer l'effet lettres creuses.
Modifié par darkstar2023 (20 Aug 2010 - 00:08)

Pour un titre de blog, un truc tout basique, cross-browsers, accessible.

Une image avec un alt bien renseigné.

Tu choisis ta profondeur.
Ton ombre.
Quelque soit le fond tu est sur que cela fonctionne.
Tu ne doubles pas le texte.

C'est pas beau le web .

@Darkstar : Super, un grand merci !


@Knarf
je n'ai pas photoshop...
j'ai testé Gimp mais c'est du chinois pour moi
il faut dix mille étapes pour faire un relief c'est super long à part peut-être si on maitrise vraiment

hélas...