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.
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:
Die Breite der Blase ist variabel und passt sich der jeweiligen Textlänge an. Außerdem habe ich eine maximale Breite von 500px vorgegeben.
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.
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.
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.
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.
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.
Hier noch ein paar Spielereien. Anzumerken ist, dass die Reihenfolge der Attribute völlig egal ist.
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 […]