CSS: Textoverlay bei Bildern

CSS Design Spielerein

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:

[code]</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> [/code]

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!

.
Stichworte: , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

Tipps Bilder in Kommentar einbetten
Zum Einbetten von Bildern lässt sich einfach imgur.com/upload verwenden. Einfach das Bild dort hochladen und den Bild-Code hier einfügen.