CSS/Eigenschaften/Textformatierung/text-fill-color

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft text-fill-color ist derzeit (Stand: Januar 2016) ausschließlich als -webkit-text-fill-color in die Webkit-Browser implementiert. Es ist unklar, ob die Eigenschaft in die CSS-Spezifikation übernommen wird.

  • Android
  • Chrome
  • Leer
  • Leer
  • Opera
  • Safari

Folgende Angaben sind möglich

  • eine Farbangabe
  • inherit, Wert des Elternelements
  • initial, berechneter Wert der color-Eigenschaft
Empfehlung: Wenn Sie diese Eigenschaft verwenden, sollten Sie sie innerhalb einer @supports-Regel notieren. So können Sie ausschließen, das eine transparente Textfarbe und eine nicht angezeigte Randlinie Text nicht sichtbar werden lassen.

Inhaltsverzeichnis

[Bearbeiten] Allgemeines

Sie können mit dieser Eigenschaft einem Text eine Farbe zuweisen, Farbangaben mit color werden überschrieben.

Sie wird oft in Zusammenhang mit -webkit-text-stroke verwendet, damit es nicht zu nicht lesbaren Texten kommt, etwa weiße Schrift auf weißem Hintergrund.

Empfehlung: Wenn Sie Text mit Randlinie und einem Verlauf als Hintergrund darstellen wollen, können Sie Text W3C-konform als SVG einbinden. Der Artikel Texteffekte mit SVG stellt einige Beispiele vor.
Beispiel
h1 {
  color: red;
  -webkit-text-stroke: 2px red;
  -webkit-text-fill-color: yellow;
}
Webkitbrowser rendern hier die h1-Elemente mit gelber Schrift und rotem Rand, wohingegen alle anderen Browser rote Schrift zeigen.

[Bearbeiten] Anwendungsbeispiel

[Bearbeiten] Text mit Farbverlauf

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="http://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" type="text/css">
    <title>text-fill-color</title>
    <style>
      p {
        color: white;
        font: bold 4em Helvetica, Arial, sans-serif;
        margin: 0.3em 0;
        padding: 0;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
 
      #eins {
        background-image: linear-gradient(yellow 20%, red);
      }
 
      #zwei {
        font-family: Bangers, sans-serif;
        letter-spacing: 0.1em;
        background-image: linear-gradient(red 40%, yellow 70%);
      }
      #drei {
        width: 4em;
        background-image: linear-gradient(
          to right,
          red,
          orange,
          yellow,
          green,
          blue,
          indigo,
          violet
        );
      }
 
      #vier {
        width: 4em;
        background-image: linear-gradient(
          to right,
          red 10%,
          orange 10%,
          orange 24%,
          yellow 24%,
          yellow 30%,
          lime 30%,
          lime 45%,
          skyblue 45%,
          skyblue 60%,
          blue 60%,
          blue 75%,
          purple 75%
        );
      }
    </style>
  </head>
  <body>
    <h1>Farbverläufe im Text</h1>
    <p id="eins">ein Farbverlauf</p>
    <p id="zwei">Indiana Jones Schrift</p>
    <p id="drei">rainbow</p>
    <p id="vier">rainbow</p>
  </body>
</html>
Die Absätze bekommen mit linear-gradient() einen Farbverlauf als Hintergrund. Der Text wird mit -webkit-background-clip: text; ausgeschnitten und mit -webkit-text-fill-color: transparent durchsichtig, sodass der Hintergrund durchscheinen kann.

Damit der Farbverlauf seine volle Wirkung entfalten kann, müssen die Innenabstände auf Null gesetzt, bzw. die Länge des Textabsatzes begrenzt werden.

Im dritten und vierten Beispiel verläuft der Farbverlauf von links nach rechts. Während die Farben im dritten Beispiel ineinander verlaufen, gibt es im 4. Beispiel feste color-stops, die die Buchstaben in jeweils einer Farbe leuchten lassen.

Die Angabe color: white; ist als Fall-Back für die Browser zu sehen, die die Angabe -webkit-background-clip: text nicht interpretieren. Sie stellen den Text in weißer Schriftfarbe dar.
Beachten Sie: Dieses Beispiel funktioniert nur in den Webkit-Browsern Android, Chrome, Opera und Safari.
Beachten Sie: Der Wert text ist für die Eigenschaft background-clip keine gültige Angabe.


[Bearbeiten] Browser-Support

Achtung!

Die Eigenschaft text-fill-color ist derzeit (Stand: Januar 2016) nur in die Browser Android, Chrome, Opera und Safari implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
  • -webkit-text-fill-color

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML