Texte als Maske für Hintergründe

Autor: Aykut Şensoy, Datum:

CSS ist mittlerweile so mächtig, dass es mit einer Fülle an Features wie Filtern, Masken, Blend-Modi, Verläufen, Transitionen, Animationen, Trasformationen, etc. eine unendliche Menge an Möglichkeiten bietet fantastische visuelle Effekte umzusetzen. Ich möchte hier eine einfache Möglichkeit zeigen, wie man auch ohne mix-blend-mode mit ganz wenigen Schritten einen Text mit Verlaufseffekt erzeugen kann.

1. Einen HTML-Container erzeugen

<div class="text-mask">CSS is awesome</div>

Im ersten Schritt wird ein einfacher HTML-Container mit einem beliebigen Textinhalt erstellt.

2. Grundlegende Styles definieren

Im zweiten Schritt werden die grundlegenden Deklarationen gemacht. Für diesen Effekt ist nur die Property background-image essentiell. Es kann sich hier wie in diesem Beispiel um einen Verlauf handeln oder auch um ein Hintergrundbild. Im Grunde ist alles möglich, was hier mit CSS background möglich ist. Die restlichen Deklarationen dienen im wesentlichen nur dafür einen großen flächigen Text über dem Hintergrund zu definieren, welches uns im nächsten Schritt als Transparenzmaske dienen soll. 

<style>
.text-mask {
  display: inline-block;
  font-family: helvetica;
  font-size: 64px;
  text-transform: uppercase;
  background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
  color: #fa8bff;
}
</style>
CSS is awesome

3. Masken-Effekt hinzufügen

Im dritten Schritt weisen wir den eigentlichen Effekt zu. Mit "background-clip" wird der Hintergrund geclipt und mit "text-fill-color" wird die Farbfüllung des Textes auf transparent gestellt. Et voilà! Der Hintergrund scheint durch den Text und der Rest wird abgeschnitten. Das ist möglich, weil im Grunde Text ja nur aus Vektorinformationen besteht und somit als Maske eingesetzt werden kann. 

<style>
.text-mask {
  ...
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
</style>
CSS is awesome

Auch wenn alle modernen Browser diese Features unterstützen, muss für beide Properties zur Zeit noch der vendor-prefix -webkit- angewendet werden. Mit der richtigen Autoprefixer Konfiguration, sollte das im Idealfall ja auch automatisch passieren. Sonst könnt ihr ja immer noch bei "caniuse.com" den genauen Browsersupport nachschauen.