Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/roundshadow.html
Aktuelle - übersetzte - Version: http://www.ich-lerne-css.de/Style/Examples/007/roundshadow.html
Übersetzer: A.Friedrich
Bookmark: AddThis Social Bookmark Button

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: Bonus. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

Rundungen mit Schatten

Fünf Bilder

Ergebnis

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:
top left corner
rechte obere Ecke und oberer Rand:
top right corner
Inhaltsbereich:
background and right edge
untere linke Ecke:
bottom left corner
untere rechte Ecke und unterer Rand:
bottom and bottom left corner

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:

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.

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.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Jan 2004;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM