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.
