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

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.