Web Style Sheets
CSS Tips & Tricks

Abgerundete Ecken und Schatten

CSS3 wird Eigenschaften für abgerundete Ecken, Rändern bestehend aus Bildern und Boxenelementen mit Schatten enthalten. Aber mit etwas Arbeit kann das Alles auch schon mit CSS2 — und ohne irgendwelchen Tabellen oder Extra-HTML Code realisiert werden.

Diese Seite wurde inspiriert durch eine Seite erstellt von Arve Bersvendsen. Er hat auch noch jede Menge weiterer CSS Demos im Angebot.

Natürlich werden abgerundete Ecken oder Schatten viel einfacher umzusetzen sein mit CSS3. Zum Beispiel, um einem Absatz eine dicke rote Umrandung mit abgerundeten Ecken zuzuweisen, genügen zwei einfache Zeilen:

P { border: solid thick red;
    border-radius: 1em }

Und um noch einen unsauberen Schattenwurf 0.5m rechts/unter dem Absatz zu zeigen reicht eine weitere Zeile:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Sie können selbst versuchen ob es bei Ihnen schon funktioniert) Aber wenn Sie diese Techniken schon heute breitflächig einsetzen möchten und sich nicht vor der Komplexität und fehlenden Flexibilität scheuen nutzen Sie doch die folgenden Methoden. Zumindest wird es ein netter Test für verbuggte Browser sein…

Fünf Bilder

Der eigentliche Trick ist die Nutzung der Eigenschaften '::before' und '::after' um vier vorgefertigte Bilder mit Schattenlook um ein Element zu legen. Das Pseudoelement '::before' kann ein Vordergrund - und ein Hintergrundbild besitzen, das '::after' Pseudoelement ebenso. Das eigentliche Element kann natürlich auch ein Hintergrundbild besitzen - zusammen also fünf Bilder.

Wir erstellen also fünf PNG Bilder und platzieren sie in den vier Ecken des Haupt Elementes. Hier die Bilder:

linke obere Ecke:

rechte obere Ecke und oberer Rand:

Inhaltsbereich:

untere linke Ecke:

untere rechte Ecke und unterer Rand:

Und hier die CSS Regeln zur Positionierung:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Da unser Hintergrundbild nur 620 Pixel breit ist funktioniert das Ganze auch nur mit Boxen mit einer maximalen Breite von 620 Pixeln. Darum existiert hier die 'max-width' Eigenschaft. Die 'display:block' Eigenschaft sorgt dafür dass die verwendeten Bildränder als Blockelemente behandelt werden und somit über und unter den Hauptinhalt gesetzt werden anstatt in die erste und letzte Zeile des Selbigen. Die Angabe 'line-height: 0' stellt sicher dass eventuelle Leerzeichen im Contentbereich der Bildboxen keine unerwünschten Effekte produzieren.

Das Ergebnis

Und so sieht es aus:

Der HTML Quelltext umfasst wirklich nur das Nötigste:

<blockquote>
<p>Sehen Sie eine hellgrüne Box mit abgerundeten Ecken und Schattenwurf vor einem weissen Hintergrund? 
Wenn nicht kann Ihr Browser unser Beispiel leider nicht richtig anzeigen.
</blockquote>

Und wenn Sie testen wollen ob ihr Browser das Ganze auch mit CSS3 umsetzen kann probieren Sie doch das folgende Beispiel aus.