smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Sprechblase mit CSS erstellen

17. Dezember 2012
Stephan
Sprechblase mithilfe von CSS erstellen

Mithilfe von CSS lassen sich heutzutage viele Effekte und Animationen umsetzen, für die man sonst zusätzlich eingebundene Grafiken benötigt hätte.

In diesem Artikel erfahrt ihr, wie ihr mittels CSS eine einfache hübsch anzusehende Sprechblase erstellen könnt. Alles was wir hierzu brauchen werden, ist ein wenig HTML und natürlich CSS.

Wie ihr sehen werdet, sind die dazu notwendigen CSS-Anweisungen nicht wirklich komplex, einfach zu verstehen und nachzubauen.

Beispiel Sprechblase

Im Folgenden ein Beispiel einer CSS-Sprechblase, die wir in diesem Artikel erstellen möchten:

Beispiel: Sprechblase mit CSS erstellt

HTML für die Sprechblase

Für unsere Sprechblase hält sich das benötigte HTML in Grenzen. Alles was wir brauchen, ist ein div-Element, welches unseren Text enthält:

<div id="bubble">
	Dieses ist eine Sprechblase, die nur mithilfe von CSS3 umgesetzt wurde!
</div>

CSS zum Erstellen der Sprechblase

Als nächstes müssen wir unser CSS hinzufügen. Dazu wollen wir als erstes das div-Element blasenartig darstellen:

#bubble {
	position: relative;
	padding: 40px 20px;
	width: 270px;
	background:-webkit-linear-gradient(top, #ffd5a9, #ff901c);
	background:-moz-linear-gradient(center top, #ffd5a9, #ff901c);
	background:-o-linear-gradient(top, #ffd5a9, #ff901c);
	background: linear-gradient(#ffd5a9, #ff901c);
	border-radius: 50%;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

Die Form einer Blase erzeugen wir durch Verwenden von border-radius, welches wir auf 50% setzen. Jetzt sollte unsere Sprechblase so aussehen:

CSS Sprechblase erstellen

Als nächstes wollen wir die zwei kleinen Kreise zur Vervollständigung unserer Sprechblase erstellen. Hierfür nutzen wir die Pseudoelemente :before und :after. Diese Pseudoelemente dienen zum Hinzufügen von Inhalt vor bzw. nach dem Inhalt eines bestimmten Elements.

Weitere Informationen zu den CSS-Pseudoelementen :before und :after findet ihr auf selfhtml.org.

Unsere CSS-Ergänzung sieht nun wie folgt aus:

#bubble:before {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50px;
    content: "";
    background: #ff901c;
    border-radius: 30px;
    bottom: -25px;
}
#bubble:after {
    position: absolute;
    width: 15px;
    height: 15px;
    left: 30px;
    content: "";
    background: #ffd5a9;
    border-radius: 15px;
    bottom: -30px;
}

Weitere Beispiele für stylische Sprechblasen, die ihr mit reinem CSS ertellen könnt, findet ihr hier: http://nicolasgallagher.com – Pure CSS speech bubbles

Fazit

Mit ein wenig CSS könnt ihr einfache als auch komplexere schön anzuschauende Sprechblasen erstellen. Die in diesem Artikel vorgestellte Sprechblase könnt ihr natürlich nach belieben anpassen.

Wie findet ihr die CSS-Sprechblase? Habt ihr vielleicht weitere Beispiele für CSS-animierte Sprechblasen?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!