376 votes

Effet de contour sur le texte

Existe-t-il des moyens en CSS pour donner des contours à des textes de couleurs différentes ? Je veux mettre en évidence certaines parties de mon texte pour le rendre plus intuitif - comme les noms, les liens, etc. Il est courant aujourd'hui de changer la couleur des liens, etc., mais je veux quelque chose de nouveau.

17 votes

@Dan Le mieux implique le différent. Vos conseils sont généralement bons, mais ils peuvent aussi étouffer l'expérimentation créative. De plus, ce n'est généralement pas "commun = bon" c'est plutôt "commun = à peine suffisant".

7 votes

@Dan Grossman : le monde évolue à partir de nouvelles idées, tout ce qui est nouveau n'est pas méprisable.

7 votes

@yoda Votre syntaxe est inhabituelle. /Je vous ai confondu avec quelqu'un d'autre le petit bonhomme vert.

529voto

Kyle Sevenoaks Points 29929

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

Ce que j'ai fait à la place, c'est d'utiliser la fonction déjà supportée text-shadow (pris en charge par Chrome, Firefox, Opera et IE 9, je crois).

Utilisez quatre ombres pour simuler un texte stroboscopique :

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

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

J'ai fait une démo pour vous ici

Et un exemple de survol est disponible ici


Comme Jason C l'a mentionné dans les commentaires, la text-shadow La propriété CSS est désormais prise en charge par tous les principaux navigateurs, à l'exception d'Opera Mini. Si cette solution fonctionne pour la rétrocompatibilité (ce qui n'est pas vraiment un problème pour les navigateurs qui se mettent à jour automatiquement), je pense que la propriété CSS de l text-stroke CSS doit être utilisé.

12 votes

Malheureusement, IE ne supporte pas text-shadow jusqu'à IE10. Curieusement, IE9 supporte box-shadow mais pas text-shadow .

0 votes

+1 pour l'idée du text-shadow. Veuillez expliquer l'idée de l'ombre du texte pour donner un trait.

0 votes

Mais si la couleur de votre texte est transparente, alors l'ombre

119voto

ancestral Points 311

Edit : text-stroke est maintenant assez mature et implémenté dans la plupart des navigateurs. . Il est plus facile, plus net et plus précis. Si l'audience de votre navigateur peut le supporter, vous devriez maintenant utiliser text-stroke d'abord, au lieu de text-shadow .


Vous pouvez et devez faire cela avec seulement le text-shadow sans aucun décalage :

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

Pourquoi ? Lorsque vous décalez plusieurs effets d'ombre, vous commencez à remarquer des angles disgracieux et irréguliers : Shadow effect offsets result in noticeable jagged corners.

Le fait d'avoir les effets d'ombrage du texte dans une seule position élimine les décalages, ce qui signifie que les effets d'ombrage du texte ne sont pas les mêmes. Si vous trouvez que c'est trop fin et préférez un contour plus sombre à la place, pas de problème - vous pouvez répéter le même effet (en gardant la même position et le même flou), plusieurs fois. Par exemple :

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) :

Sample text rendered with text-shadow

Remarque : les lignes devenant très fines, il est conseillé de désactiver le rendu sous-pixel à l'aide de la touche
-webkit-font-smoothing: antialiased .

0 votes

Réponse intéressante, merci. Je ne comprends pas vraiment ce que vous entendez par "répéter" l'effet.

0 votes

Merci pour le font-smoothing cela a grandement amélioré le résultat dans chrome !

0 votes

Le rendu est médiocre dans Safari 7.1, le contour manque d'anticrénelage et ne semble pas s'étoffer à mesure que vous répétez l'effet.

118voto

vsync Points 11280

Facile ! SVG à la rescousse.

Il s'agit d'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 }
}

<svg viewBox="0 0 450 50">
  <text y="50">Scalable Title</text>
</svg>

En voici une autre démonstration complexe .

6 votes

Il s'agit d'une excellente solution qui ne présente aucun des problèmes de performance associés au text-shadow. La différence de performances entre cette approche et l'empilement de plusieurs text-shadows est énorme pour mon application particulière (IE 10 sur de grands écrans).

3 votes

Cela m'a donné un bien meilleur effet que les ombres de texte, car j'avais besoin d'une ligne épaisse. Merci !

2 votes

C'est de l'or pur, mec ! Approche très professionnelle et compétente, réponse parfaite à la question ! Cette solution est en avance sur le Conseil W3 ou Google ou autre, félicitations !

41voto

brunodeleo Points 121

Vous pouvez essayer d'empiler plusieurs ombres bleues 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 violon : http://jsfiddle.net/GGUYY/

Je le mentionne juste au cas où cela intéresserait quelqu'un, même si je ne l'appellerais pas une solution car il échoue de plusieurs façons :

  • il ne fonctionne pas dans l'ancien IE
  • le rendu est très différent dans chaque navigateur
  • appliquer autant d'ombres est très lourd à traiter :S

1 votes

C'est une idée vraiment simple et brillante !

1 votes

Merci, le problème avec ceci est la performance, à utiliser avec précaution :)

1 votes

C'est fantastique. Les couches supplémentaires d'ombres ajoutent vraiment de la profondeur, et cela fonctionne dans IE11, FF36 et Chrome 41.

17voto

crdunst Points 511

Je pense avoir trouvé une solution qui n'implique pas de balises supplémentaires, qui fonctionne dans IE7-9 (je n'ai pas testé 6) et qui ne cause pas de problèmes d'aliasing.

C'est une combinaison de l'utilisation de CSS3 text-shadow, qui a un bon support sauf IE ( http://caniuse.com/#search=text-shadow ), puis en utilisant une combinaison de filtres pour IE. La prise en charge de la frappe de texte en CSS3 est faible pour le moment.

Filtres IE

Le filtre incandescent ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) a l'air terrible, donc je ne l'ai pas utilisé.

La réponse de David Hewitt a consisté à ajouter des filtres d'ombre portée dans une combinaison de directions. Le ClearType est ensuite supprimé, malheureusement, et nous nous retrouvons avec un texte mal aliasé.

J'ai ensuite combiné certains des éléments suggérés sur utilisateuragentman avec les filtres d'ombre portée.

Mise en place

Cet exemple serait un texte noir avec un trait blanc. J'utilise d'ailleurs des classes 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;
}

0 votes

Cela fonctionne également dans l'ancien IE : filter: glow(color=white,strength=1);

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X