Effet de contour sur le texte

Question

Y a-t-il des moyens en CSS de donner des contours à du texte avec des couleurs différentes ? Je veux souligner certaines parties de mon texte pour le rendre plus intuitif - comme les noms, les liens, etc. Changer les couleurs des liens, etc. est courant de nos jours, donc je veux quelque chose de nouveau.

Answer 1

Il existe une propriété webkit expérimentale appelée text-stroke en CSS3, j'ai essayé de la faire fonctionner depuis un certain temps mais sans succès jusqu'à présent.

À la place, j'ai utilisé la propriété text-shadow déjà prise en charge (prise en charge dans Chrome, Firefox, Opera, et IE 9 je crois).

Utilisez quatre ombres pour simuler un texte contouré :

.strokeme {
  color: white;
  background-color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

  Ce texte devrait avoir un contour dans certains navigateurs

J'ai créé une démo pour vous ici

Et un exemple survolé est disponible ici

---

Comme Jason C l'a mentionné dans les commentaires, la propriété CSS text-shadow est désormais supportée par tous les navigateurs majeurs, à l'exception d'Opera Mini. Alors que cette solution fonctionnera pour la compatibilité ascendante (pas vraiment un problème concernant les navigateurs qui se mettent à jour automatiquement), je crois que la propriété CSS text-stroke devrait être utilisée.

Answer 2

Facile! Le SVG à la rescousse.

Voici une méthode simplifiée:

svg{
  font   : bold 70px Century Gothic, Arial;
  width  : 100%;
  height : 120px;
}

text{
  fill            : none;
  stroke          : black;
  stroke-width    : .5px;
  stroke-linejoin : round;
  animation       : 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:5px }
}

  Titre scalable

Voici une démo plus complexe.

Uniquement CSS:

h1 {
  font: 800 40px Arial;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
}

Je suis souligné

Si vous souhaitez un contour épais, veuillez lire ma autre réponse sur Stackoverflow

Answer 3

Éditer : text-stroke est maintenant assez mature et implémenté dans la plupart des navigateurs. C'est plus facile, plus net et plus précis. Si votre audience de navigateur peut le supporter, vous devriez maintenant utiliser text-stroke en premier, au lieu de text-shadow.

---

Vous pouvez et devriez le faire avec juste l'effet text-shadow sans aucun décalage :

.contour {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Pourquoi ? Lorsque vous décalez plusieurs effets d'ombre, vous commencerez à remarquer des coins disgracieux et ciselés :

Avoir des effets de text-shadow dans une seule position élimine les décalages, signifiant Si vous trouvez que c'est trop fin et préféreriez plutôt un contour plus foncé, pas de problème - vous pouvez répéter le même effet (en gardant la même position et flou), plusieurs fois. Comme ceci :

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

Voici un échantillon d'un seul effet (en haut), et le même effet répété 14 fois (en bas) :

Remarquez également : Comme les lignes deviennent si fines, il est très prudent de désactiver le lissage des sous-pixels en utilisant
-webkit-font-smoothing: antialiased.

Answer 4

Vous pourriez essayer de superposer plusieurs ombres floues jusqu'à ce que les ombres ressemblent à un trait, comme ceci :

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Voici un fiddle : http://jsfiddle.net/GGUYY/

Je le mentionne au cas où quelqu'un serait intéressé, même si je ne dirais pas que c'est une solution car cela échoue à plusieurs égards :

• ne fonctionne pas dans les anciennes versions d'IE
• rendu assez différent dans chaque navigateur
• l'application de tant d'ombres est très lourde à traiter :S

Answer 5

Je cherchais une solution de contour de texte compatible avec tous les navigateurs et qui fonctionne lorsqu'il est superposé à des images de fond. Je pense avoir trouvé une solution pour cela qui ne nécessite pas de balisage supplémentaire, de JavaScript et fonctionne dans IE7-9 (je n'ai pas testé le 6), et ne provoque pas de problèmes d'aliasing.

Il s'agit d'une combinaison de l'utilisation de text-shadow en CSS3, qui est bien pris en charge sauf par IE (http://caniuse.com/#search=text-shadow), puis l'utilisation d'une combinaison de filtres pour IE. Le support du text-stroke en CSS3 est actuellement médiocre.

Filtres IE

Le filtre de lueur (http://www.impressivewebs.com/css3-text-shadow-ie/) est horrible, donc je ne l'ai pas utilisé.

La réponse de David Hewitt consistait à ajouter des filtres de dropshadow dans différentes directions. Malheureusement, ClearType est alors supprimé, ce qui donne un texte mal aliasé.

J'ai ensuite combiné certains des éléments suggérés sur useragentman avec les filtres de dropshadow.

Mise en œuvre

Dans cet exemple, le texte serait en noir avec un contour blanc. Je suis d'ailleurs en train d'utiliser des classes de html conditionnelles pour cibler IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}