css police Effet de contour au texte



text shadow css (9)

Edit: text-stroke est maintenant assez mature et mis en œuvre dans la plupart des navigateurs . C'est plus facile, plus net et plus précis. Si l'audience de votre navigateur peut le prendre en charge, vous devez d'abord utiliser le text-stroke premier, au lieu de l' text-shadow du text-shadow .

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

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

Pourquoi? Lorsque vous désactivez plusieurs effets d'ombre, vous commencez à remarquer des coins disgracieux et dentelés:


Avoir des effets d'ombrage dans une seule position élimine les décalages, c'est-à-dire Si vous pensez que c'est trop mince et préférez un contour plus foncé, pas de problème - vous pouvez répéter le même effet (garder la même position et le même flou) plusieurs fois. Ainsi:

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


Notez également: Parce que les lignes deviennent si fines, c'est une très bonne idée de désactiver le rendu sous-pixel en utilisant
-webkit-font-smoothing: antialiased .

Existe-t-il des moyens de CSS pour donner des contours au texte avec des couleurs différentes? Je veux mettre en évidence certaines parties de mon texte pour le rendre plus intuitif - comme les noms, les liens, etc. Changer les couleurs des liens, etc. sont courants de nos jours, alors je veux quelque chose de nouveau.


Answer #1

Travailler avec des traits plus épais devient un peu brouillon, si vous avez le plaisir de sass essayer ce mixin, pas parfait et en fonction du poids de la course, il génère une bonne quantité de css.

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

Answer #2

Vous pourriez essayer d'empiler de multiples ombres blurifiées 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ù quelqu'un serait intéressé, bien que je n'appellerais pas ça une solution parce qu'elle échoue de différentes manières:

  • ça ne marche pas dans l'ancien IE
  • il rend très différemment dans tous les navigateurs
  • appliquer autant d'ombres est très lourd à traiter: S

Answer #3

Facile! SVG à la rescousse.

C'est une méthode simplifiée:

svg{
  font: bold 50px 'Arial';
  width: 50%;.
  height: 50px;
}

text{
  fill: none;
  stroke: red;
  stroke-width:2px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
}
<svg viewBox="0 0 350 50">
  <text y="40">Scalable Title</text>
</svg>

    

Voici une démo plus complexe .


Answer #4

h1{
color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}
<h1>Properly stroked!</h1>


Answer #5

Plusieurs textes-ombres ..
Quelque chose comme ça:

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

Démo: http://jsfiddle.net/punosound/gv6zs58m/


Answer #6

Ce mixin pour SASS donnera des résultats réguliers, en utilisant 8 axes:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

Et CSS normal:

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

Answer #7

J'ai obtenu de meilleurs résultats avec 6 ombres différentes:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

Answer #8

Il y a une propriété de webkit expérimentale appelée text-stroke dans CSS3, j'ai essayé de faire marcher cela pendant un certain temps mais j'ai échoué jusqu'ici.

Ce que j'ai fait à la place est utilisé la propriété text-shadow déjà supportée (supportée dans Chrome, Firefox, Opera et IE 9 je crois).

Utilisez quatre ombres pour simuler un texte contourné:

HTML:

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

CSS:

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

J'ai fait une démo pour toi ici

Et un exemple survolé est disponible ici

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





css