Appliquer un contour à du texte

Lol, on va se taper sur la tronche

Alors... ne fait pas d'ombres, tout simplement ;)

Et en plus le résultat est plutôt affreux !!!

Hmm... j'ai des doutes, mais je veux bien te croire, mais ne me ressors pas "quand on sait bien l'utiliser" !! on prend un texte on applique la propriété et zou... je vois pas ce qu'il y a de technique la dedans !!!

Mais j'ai même plus envie de me poser la question vu que c'est super mal implémenté et pas dans les projets de CSS2.1

Je remonte ce sujet, juste pour vous dire que les commentaires m'ont fait réfléchir quant à la méthode utilisée.

J'ai donc changé la technique en proposant deux nouvelles méthodes :
- une méthode "moins pire" que l'ancienne (qui affichait deux H1 à la suite)
- une méthode encore un peu moins pire en utilisant le contenu généré en CSS.

--> http://www.alsacreations.com/articles/ombre

Je ne vois pas le changement pour la bidouille HTML: le contenu est toujours répété et donc dénué de sens uniquement à des fins de présentation.

L'astuce CSS du title détourne celui-ci de sa fonction, puisque ce title n'ajoute aucune information au contenu du h1, mais elle limite au moins les dégâts pour l'accessibilité. En revanche, elle s'apparente tout à fait elle aussi aux mauvaises pratiques de référencement par multiplication cachée de mots-clés...

Désolé, Raphael, mais sans jouer les puristes intransigeants, je ne vois pas l'intérêt de ramener la présentation dans la structure du document. A tout prendre, un titre en image est à la fois plus conforme, plus sémantique, et ne pose pas plus de problèmes d'accessibilité, d'interopérabilité, d'indexation, etc.

Par contre, je viens de relever un petit bug :
http://www.alsacreations.com/articles/ombre/ombre4.htm

Le texte devient non selectionable et ça c'est plutôt génant je trouve...
C'est parceque le texte généré via content n'est pas selectionnable. Peut etre qu'en jouant sur les z-index...

Laurent Denis a écrit :
En revanche, elle s'apparente tout à fait elle aussi aux mauvaises pratiques de référencement par multiplication cachée de mots-clés...

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.

Laurent Denis a écrit :
Désolé, Raphael, mais sans jouer les puristes intransigeants, je ne vois pas l'intérêt de ramener la présentation dans la structure du document. A tout prendre, un titre en image est à la fois plus conforme, plus sémantique, et ne pose pas plus de problèmes d'accessibilité, d'interopérabilité, d'indexation, etc.

Oui bien sûr, mais les titres en image impliquent :
- une séparation incomplète de la structure et de la forme (cela ne facilite pas les mises à jour futures car il faut refaire toutes les images de tous les titres)
- une augmentation du poids qui peut être conséquente, même si ce n'est plus trop important
- des problèmes de référencement et d'indexation car une image avec alt est moins bien prise en compte.

Raphaël a écrit :

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.

Ahh oui c'est vrai ça :D en plus ça facilite la lecture (en laissant la souris sur texte) avec l'attribut title.

Disons qu'il est interessant de connaitre la technique, mais de ne pas en abuser, non ?

Sinon dans le même genre un effet graphique qui pourrait etre interessant c'est de mettre le title (quand il exite element {...}) avec un effet filigrane (couleur très peu contrastée avec le fond) pour rajouter un peu de style :D

Genre pour des <pre>, on met class="PHP" class="CSS" class="JavaScript", ... et via CSS

pre
{
background: #fff ;
}
html > body pre[ class]:before /* hack pour éviter qu'IE interprete font, et margin */
/* il y a un espace entre [ et class pour eviter que ca soit interprété comme du BBcode*/
{
content: attr(class) ;
color: #eee ;
margin-top: 5px ;
font-size: 3em ;
font-style: italic ;
}

J'ai tapoté le code comme ça au filling, mais ca pourrait donner un résultat sympa en testant un peu.
Modifié le 30 Oct 2004 - 11:41

Yep, impecable ! Merci du coup de pouce Raphaël ;) tellement simple que je n'y avait pas pensé !

Je trouve ça sympa comme rendu, nan ?

Il faudrait faire ensuite une coloration syntaxique suivant les class et gérer le tout via PHP (ou JS pourquoi pas...)

Raphael a écrit :

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.

? La syntaxe de base d'un titre en image accessible étant:

<h1><img ... alt="Equivalent textuel de l'image ici"></h1>

Je ne vois pas le rapport avec un title détourné ?

A quelle syntaxe fais-tu allusion exactement ?

<h1 title="Equivalent textuel de l'image ici'"><img ... alt="Equivalent textuel de l'image ici'"></h1>

... le title est inutile et sans justification

<h1 title="Equivalent textuel de l'image ici'"><img ... alt="'"></h1>

... le alt est mal renseigné

<h1 title="Equivalent textuel de l'image ici'"><img ...></h1>

... l'absence de alt est invalide.

Sur le fond, je n'ai rien contre l'idée de trouver un biais pour obtenir cet effet d'ombrage que CSS2 ne permet pas. Mais ce biais, pour être préférable à un texte en image, devrait AMHA respecter comme cahier des charges, par exemple:
- ne pas détourner le HTML de sa signification
- ne pas compromettre la restitution du contenu quelque-soit le media
- apporter un bénéfice par rapport au titre en image (effectivement, une gestion plus simple des modifications du texte).

Je crois avoir déjà mentionné la <edit>sIFR</edit> dans cet ordre d'idée, même si elle reste elle aussi une "bidouille".
Modifié le 30 Oct 2004 - 12:35