CSS: Textoverlay bei Bildern

Beim Besuch im Adwords Account bin ich eben auf einen Eye-Catcher in Sachen Hintergrundbild mit Text-Overlay gestoßen. Im Prinzip eine simple Zweier-DIV Konstruktion gepaart mit Google Fonts ergeben doch ein ansehnliches Ergebnis.

Um das Ganze als Post-It für einen eventuellen späteren Einsatz zu verwenden, im Folgenden eine experimentelle DIV-IMG-Bastelei. Ich werde mir dafür circa 10 Minuten zum Nachbau des Webdesign-Konstrukts vornehmen. Los geht’s – hier ein Screenshot zum Objekt.

Adwords Kundenstimme
Adwords Kundenstimme – Quelle: google.de/adwords letzter Abruf: 09.08.11

Auf den ersten Blick ein einfaches Foto mit einem transparenten schwarzen Textrahmen und Schrift. Bei genauerer Betrachtung, handelt sich aber um 2 DIV-Konstruktionen, bei denen der Text über das Bild gelegt wurde. Besonders bei der Skalierung der Bildschirmauflösung sieht man direkt den Vorteil dieser Lösung. Hier der Code der Google Adwords Erfolgsgeschichten-Anzeige:

</pre>
<div id="hero-wall-art" class="aw-cu-ui">
<div class="aw-cu-quote">
<blockquote>
"Text."</blockquote>
 <cite>Nico</cite>

Gründer...</div>
</div>
<pre>
 

Im Prinzip braucht man nur ein Foto, etwas Google Font für einen netten Effekt und etwas Code. Also hier eine kurze Umsetzung anhand des Adwords-Kundenstimmen-Beispiels.

Als Ausgangsfoto habe ich einfach meine Kaffeetasse heute morgen mit meinem guten alten Samsung Galaxy GT-I7500 fotografiert.

Kaffeetasse mit Herzen
Bild meiner Kaffeetasse

Im nächsten Schritt schreiben wir ein paar Codezeilen, wie im DIV-Beispiel oben und verwenden das passende CSS dazu, um den Textoverlay beim Bild zu erzeugen:

„Kaffee am Morgen und Webdesign – für einen guten und kraftvollen Start in den Tag.“Heiko SchmiederBlogger & Übersetzer, goeo.de

Et voilá – ein relativ einfacher Effekt mit lesbarem Text und transparentem Textfeld.
Dazu einfach noch ein paar Text-Schatten per CSS hinzu, abgerundete Ecken links oben und unten, ein paar Paddings und Margins – ein Ergebnis was sich sehen lassen kann. Sicherlich könnte man den CSS-Code noch etwas entrümpeln, um somit etwas Ladezeit zu gewinnen, aber im Gegensatz zu einem hochauflösenden Bild mit eingebettetem Text, eine immer noch recht schlanke Lösung.

Viel Spaß beim Nachbauen!

.