Gliederungseffekt für Text

Question

Gibt es in CSS Möglichkeiten, Text mit verschiedenen Farben zu konturieren? Ich möchte einige Teile meines Textes hervorheben, um ihn intuitiver zu gestalten - z. B. die Namen, Links usw. Das Ändern der Link-Farben usw. ist heutzutage üblich, also möchte ich etwas Neues.

Answer 1

Ich war auf der Suche nach einem Cross-Browser-Text-Strich-Lösung, die funktioniert, wenn überlagert auf Hintergrundbilder. Ich denke, ich habe eine Lösung für diese, die nicht mit zusätzlichen Mark-up, Js und funktioniert in IE7-9 (ich habe nicht getestet, 6), und verursacht keine Aliasing Probleme.

Dies ist eine Kombination aus der Verwendung von CSS3 text-shadow, die außer im IE gut unterstützt wird ( http://caniuse.com/#search=text-shadow ) und dann eine Kombination von Filtern für den IE verwenden. CSS3 Text-Strich-Unterstützung ist schlecht im Moment.

IE-Filter

Der Glühfilter ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) sieht schrecklich aus, deshalb habe ich es nicht verwendet.

Die Antwort von David Hewitt das Hinzufügen von Schlagschattenfiltern in einer Kombination von Richtungen. ClearType ist dann leider entfernt, so dass wir am Ende mit schlecht aliased Text.

Ich habe dann einige der Elemente kombiniert, die auf useragentman mit den Schlagschattenfiltern.

Zusammenstellung

Dieses Beispiel wäre schwarzer Text mit einem weißen Strich. Ich verwende übrigens bedingte HTML-Klassen für den 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;
}

Answer 2

Dieses Mixin für SASS liefert glatte Ergebnisse unter Verwendung von 8 Achsen:

@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;
}

Und normales CSS:

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 3

Ich habe mit 6 verschiedenen Schatten bessere Ergebnisse erzielt:

.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 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

Arbeiten mit dickeren Strichen wird ein bisschen chaotisch, wenn Sie das Vergnügen haben, Sass versuchen diese Mixin, nicht perfekt und je nach Strichstärke es erzeugt eine ganze Menge von 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;
}