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. Da ich hier im Blog, auch aus Zeitgründen, lange nichts mehr geschrieben habe, und trotzdem kurze Phasen experimenteller DIV-IMG-Basteleien nicht ausbleiben sollten, nehme ich mir mal 10 Minuten für den Nachbau des Webdesign-Konstrukts, das mir sehr gut gefällt – somit auch als Post-it um es später mal für eigene Projekte zu nutzen.

Also es geht um folgendes Bild.

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!

.