Absätze als Info-Box heraus stellen - 1. Teil
Dank CSS ist es erstaunlich einfach, z.B. einen Text-Absatz entsprechend zu gestalten. Alles, was wir dazu brauchen ist eine CSS-Klasse, die wir den gewünschten Absätzen dann zuweisen, siehe hierzu auch:
CSS-Klassen für Absätze verwenden.
Die dazu nötige CSS-Regel hinterlegen Sie am besten global für das Projekt, weitere Infos hierzu finden Sie unter
Eigenen CSS-Code für ein Projekt hinterlegen.
Die Hintergrundfarbe
Beginnen wir mit einer einfachen CSS-Klasse; nennen wir sie infoBox:
.infoBox {
background-color: #e2e2e2;
}
Wenn wir diese Klasse nun zum Beispiel einem Text-Absatz zuweisen, dann erhält der Absatz dadurch die definierte Hintergrundfarbe:
Vorher
So sieht der Absatz ohne die zugewiesene Klasse aus: ganz gewöhnlich, wie immer :-).
Nachher
Und so mit einem Hintergrund. Ok, das ist noch nicht wirklich beeindruckend und auch nicht hübsch.
Einen Innenabstand festlegen
Das geht besser: geben wir dem Inhalt des Absatzes zuerst einmal etwas "Luft". Hierzu definieren wir einen Innen-Abstand, das sog. Padding. Wir verwenden im beispiel Pixel und legen die gewünschten Werte mit dem Innenabstand oben beginnend im Uhrzeigersinn fest:
.infoBox {
background-color: #e2e2e2;
padding: 5px 10px 10px 5px;
}
Das Ergebnis mit Padding
So sieht der Absatz mit einem Innenabstand aus - schon besser. Aber wir können uns noch steigern!
Abgerundete Ecken
Wie wäre nun noch mit abgerundeten Kanten? Dank CSS ist auch dies keine Hexerei, wir ergänzen hierzu die nötigen Angaben für den Border-Radius:
.infoBox {
background-color: #e2e2e2;
padding: 5px 10px 10px 5px;
border-radius: 14px;
}
Mit Padding und Border-Radius
Na, das sieht doch schon richtig gut aus. Die graue Farbe ist zwar noch etwas dröge, aber das lässt sich ja zum Glück rasch ändern. Passen Sie einfach die background-color nach Ihren Wünschen an. Wie wäre es mit einem leichten Grün?
.infoBox {
background-color: #d1f0b9;
padding: 5px 10px 10px 5px;
border-radius: 14px;
}
Mit Padding, Border-Radius und in Grün
So, das gefällt schon ziemlich gut. Die Farbe können Sie ja nach Ihren Vorlieben und passend zu Ihrem Webauftritt selber bestimmen.
Die Farbwerte können Sie sich übrigens direkt in weblica im Farbwahl-Dialog besorgen: dort können Sie den Farbwert im Hexadezimal-Format direkt aus dem Dialog kopieren: Markieren Sie hierzu einfach den Farbwert und Drücken Sie dann Ctrl-C. Anschliessend können Sie diesen Wert dann in Ihr CSS-Schnippsel kopieren.
Zum Schluss wollen wir uns noch ansehen, wie wir dem Absatz noch einen Schatten verpassen können. Auch das geht dank CSS einfach. Damit das ganze wegen des Schattens nicht zu breit wird, haben wir im Beispiel die Breite des Absatzes auf 95% reduziert.
.infoBox {
background-color: #d1f0b9;
padding: 5px 10px 10px 5px;
border-radius: 14px;
box-shadow: 10px 10px 5px #888888;
width: 95%;
}
Mit Padding, Border-Radius, in Grün mit Schatten
Und schon haben Sie eine InfoBox mit Hintergrund und Schatten. Spielen Sie ruhig mit den verschiedenen Werten, um die Einstellungen zu finden, die Ihnen am besten gefallen.
Und nun viel Spass beim Ausprobieren!
Im 2. Teil schauen wir uns dann an, wie wir den Absatz-Titel innerhalb der Box platzieren und den Titel auf Wunsch auch noch mit einem Bild versehen können:
Absätze als Info-Box heraus stellen - 2. Teil.