Einfache Sprechblasen mit CSS3

Sprechblasen zu gestalten ist seit CSS3 recht handlich geworden. Für einen Artikel wollte ich mir ein paar Exemplare basteln, stellte aber fest, dass die meisten Anleitungen im Netz entweder auf Englisch, schlecht erklärt, oder beides sind. Ein sehr gutes Tutorial gibt es von Nicolas Gallagher, der ein paar verschiedene Varianten vorstellt. Nun war das aber noch nicht so ganz, was ich mir vorgestellt habe. Ich wollte mehr Gestaltungsfreiheit bei gleichzeitig weniger Aufwand, so habe ich mir selbst ein wenig CSS zusammengeschrieben. Nachdem mir das Ergebnis sehr gut gefällt, möchte ich es an dieser Stelle ein wenig erklären und zur freien Verfügung bereitsetellen.

Vorweg: Ich habe das ganze Zeug in einer eigenen sprechblasen.css ausgelagert und reichlich kommentiert.

Grundgerüst
Das Prinzip ist einfach: Es wird nur eine Zeile Code benötigt, in einer div-Klasse werden alle gewünschten Parameter definiert. Ein Beipspiel einer unformatierten Sprechblase:

<div class=”sprechblase”>
 


Die Breite der Blase ist variabel und passt sich der jeweiligen Textlänge an. Außerdem habe ich eine maximale Breite von 500px vorgegeben.

Positionierung
Für die gewünschte Position, bis jetzt links und rechts, wird einfach das entsprechende Attribut in die Klasse geschrieben. Übrigens: Unformatierte Sprechblasen sind automatisch linksbündig ausgerichtet.

<div class=”sprechblase rechts”>
 

Der Pfeil
Als nächstes wollen wir vielleicht noch einen kleinen Pfeil an unserer Sprechblase. Um selbigen individuell ausrichten zu können, habe ich vier verschiedene Unterklassen definiert, die auch einfach jeweils in der Klasse angehängt werden: pfeillinksoben, pfeilrechtsoben, pfeilrechtsunten und pfeillinksunten.

 
<div class=”sprechblase rechts pfeilrechtsunten”>
 

Das ist schonmal das Grundgerüst einer Sprechblase. Die Pfeile werden horizontal variabel ausgerichtet, um auch bei sehr kleinen Sprechblasen eine korrekte Darstellung zu gewährleisten.

Hier ein sehr langer Text über die gesamte Breite. Der Pfeil wird automatisch ausgerichtet.
 
 

Die Farben
Nun zum Layout. Ich habe mir bereits einige Varianten vordefiniert, die aber leicht geändert und erweitert werden können. Die gewünschte Farbe wird auch einfach als Klassenattribut angehängt. Unformatierte Blasen sind übrigens grau. Bis jetzt gibt es ausserdem rot, blau, grün, gelb, orange und lila.

<div class=”sprechblase rechts pfeillinksunten rot”>
 
<div class=”sprechblase pfeilrechtsoben blau”>
 

Der Text
Der Text ist standardmäßig schwarz, Font und Größe richten sich nach meiner style.css. Für mehr Komfort habe ich die Schriftgrößen 10px, 12px, 14px, 16px, 18px und 20px als Klassenattribute definiert, die auch (allerdings ausgeschrieben) einfach in die div-Klasse geschrieben werden können. Außerdem können ein b- und ein i-Tag verwendet werden.

<div class=”sprechblase rechts pfeillinksunten zehn i”>
 
 

Mehr Beispiele
Hier noch ein paar Spielereien. Anzumerken ist, dass die Reihenfolge der Attribute völlig egal ist.

 
<div class=”sprechblase achtzehn pfeillinksoben rechts lila”>
 
<div class=”sprechblase b i rechts pfeilrechtsunten”>
 
 

Anmerkungen
Die Designprofis wird das wohl nicht sehr beeindrucken, doch das war auch nicht die Intention. Ich selbst beherrsche CSS eher grob, daher habe ich das Zeug ursprünglich zur Vereinfachung für mich selbst geschrieben. Ich denke aber, dass der ein oder andere, der ebenfalls eher Hobby-Coder als Profi ist, damit viel Nützliches anstellen kann.

Natürlich garantiere ich nicht für Fehlerfreiheit des Codes, diese Version stellt lediglich ein Grundgerüst dar und funktioniert bis jetzt einwandfrei in Chrome, Firefox und Safari. Ich freue mich über Kommentare, Kritik und Anregungen. Viel Spaß damit!

Kommentare

[…] einem responsiven umgestaltet. Hat ganz gut funktioniert, wenn ich bedenke, dass ich wie auch schon hier oder hier relativ planlos am Werk war. Hauptseiten waren relativ easy umzugestalten, im Gegensatz […]

Schreibe einen Kommentar