19. Juni 2013

Transparente Hintergründe von Schriften

Um beispielsweise Überschriften etwas mehr Individualität zu geben, ist man immer auf der Suche nach neuen CSS-Styles, mit deren Hilfe man diese noch ansprechender gestalten kann. Über Schriftfarben mit Verläufen, Rahmen und Schatten kann man mit einem schönen Schriftschnitt schon Einiges anstellen. Was ist aber, wenn man diese gerne mit einer fotorealistischen Textur oder den Effekt einer ausgestanzten Schrift darstellen möchte?

Lösung für Webkit-Browser

Für Webkit-Browser gibt es hierfür eine proprietäre Eigenschaft mit deren Hilfe man sehr einfach einer Schrift einen entsprechenden Hintergrund zuweisen kann:

background: url(image.png) repeat 0px 0px, #ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Dadurch erhält man z.B. eine transparente Überschrift im Chrome. Durch eine kleine Verschachtelung kann man sogar einen relativ guten Fallback erzeugen, der dann allerdings invertiert ist:

h1 {
	font-size: 120px;
	padding: 50px;
	margin: 0;
	background: #ffffff;
	color: #ffffff;
}
h1 span {
	background: url(image.png) repeat 0px 0px, #ffffff;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

JavaScript-basierte Cross-Browser Lösung

Dadurch, dass einem aber nicht wirklich geholfen ist, wenn ausschließlich in Webkit-Browsern die gewünschte Darstellung angezeigt wird, kann man JavaScript zur Hilfe ziehen. Benötigt wird nur ein kurzes Skript welches man zusammen mit dem Javascript-Framework jQuery in den Kopf der Seite einbindet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://rawgithub.com/myadzel/patternizer/master/jquery.patternizer.js"></script>

Das vorhandene <span>-Tag erweitert man dann mit einer speziellen Klasse und dem gewünschten Hintergrundbild im data-pattern Attribut:

<h1><span class="background-clip" data-pattern="image.png">TEST</span></h1>

Am Ende der Seite kann die Ersetzung über das folgende kleine Snippet gestartet werden, welches alle Pattern der Elemente mit der Klasse background-clip ersetzt:

<script>
jQuery(function ($) {
	$(".background-clip").patternizer();
});
</script>

Somit kann man auf die CSS-Definition von h1 span verzichten. Eine Fallbackfarbe wird dann dem h1 zugewiesen, die dem gewünschten Hintergrund am ähnlichsten kommt, so dass ohne JavaScript die Überschrift trotzdem lesbar bleibt.

Alternative Hintergrund-Transparenz z.B. für eine Navigation

Der Nachteil an dieser Methode ist es allerdings, dass der Hintergrund in der Schrift immer gleich positioniert ist. Daher eignet sich diese Methode eigentlich ausschließlich für Patterns oder transparente Überschriften. Möchte man hingegen die Punkte in einer Navigation transparent darstellen, eignet sich diese Methode nicht. Eine schöne Alternative ist das folgende Navigations-Beispiel mit transparenten Listenpunkten:

Hier wirken die einzelnen Listen Punkte, als ob sie einen transparenten Hintergrund hätten. Was über die Vergabe von Hintergrundgrafiken pro Listenpunkt oder durch die Wiederverwendung des Haupt-Hintergrundbildes auf Anhieb plausibel erscheint, ist in der Praxis so gut wie unmöglich, da die Verschiebung der Positionierung per JavaScript berechnet oder durch feste Werte und Abstände fest definiert werden müsste. Dies ist auf einem Fullscreen Hintergrundbild welches mit wächst jedoch nahezu unmöglich.

Der Trick hierbei ist recht einfach: Nicht die Listenpunkte werden transparent dargestellt, sondern der Rahmen außen herum wird eingefärbt. Das ist aufgrund des derzeit angesagten Flat Designs zum Glück auch recht einfach möglich, da keine Kanten durch Verläufe oder Schatten entstehen.

Das im Screenshot gezeigte Beispiel besteht ausschließlich aus einer einfachen Liste, dessen Listenpunkte mit -Tags erweitert wurden. Zugleich dienen diese der Erzeugung von Pausen bei älteren Screenreadern und dienen der Barrierefreiheit:

ul {
	margin: 30px 0 0 10%;
	padding: 0;
	list-style: none;
	overflow: hidden;
 
	width: 260px;
	float: left;
	border: 10px solid #ffffff;
	border-bottom: 30px solid #ffffff;
}
 
li {
	clear: both;
	float: left;
	width: 100%;
	position: relative;
 
	font-size: 20px;
	height: 1.3em;
	line-height: 1.3em;
	white-space: nowrap;
 
	margin: 0;
	padding: 0;
	list-style: none;
 
	color: #ffffff;
	border-bottom: 7px solid #ffffff;
}
 
li span {
	height: 100%;
	width: 1000px;
	position: absolute;
	right: -1000px;
	top: 0px;
	background: #ffffff;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}
 
li a {
	float: left;
	height: 100%;
 
	position: relative;
	padding: 0px 10px 0px 7px;
}

Durch die relativen Größenangaben bleiben die gezeichneten Rahmen und Flächen auch bei Anpassung der Schriftgröße, über font-size oder auch direkt in den Browser-Eigenschaften, immer noch korrekt. Gerade bei sich wechselnden Hintergründen oder durch Veränderung der Browsergröße bei vollflächigen Hintergrundbildern kommt der Transparent-Effekt sehr gut zur Geltung.

19. Juni 2013
Christian Lange

Christian Lange