Ein Bild als Textfüllung – eine kleine CSS Spielerei mit dem Bricks Builder.
Der Effekt wirkt gut bei großen und dicken Überschriften. Wir erstellen ein Überschrift, skalieren diese auf gewünschte Größe und legen im Überschrift Element ein Bild in den Hintergrund. Sinnig wäre ein Bild in den ungefähren Ausmaßen der Überschrift.
Damit das Bild nicht verzerrt wird, können wir als Hintergrundgröße „Cover“ wählen und ggf. eine Positionierung wie z.B. Mitte / Mitte.
Im nächsten Schritt setzen wir die Textfarbe auf Transparent.
Nun fehlt noch der Maskeneffekt. Dafür nutzen wir etwas CSS Code. Wir können eine eigene Klasse vergeben und diese ansprechen oder mit %root% (einfach per Tastureingabe mit „r + TAB“) arbeiten.
%root% {
background-clip: text;
}
Das Bild füll nun den Text aus.
Möchten wir als Stilmittel auf mehreren Seiten mit diesem Effekt arbeiten, können wir uns eine globale Klasse erstellen und dieser dann Schriftstile, die Transparenz und den eigenen CSS Code zuweisen. Dann müssen wir nur die Klasse zuweisen und das entsprechende Hintergrundbild einstellen. Bei Bedarf können wir dann über die globale Klasse Anpassungen für alle Instanzen vornehmen.
