Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/shadows.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/shadows.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: Hilfe . 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)

Demo

Boxen mit Schattenwurf

CSS2 bietet keine Möglichkeit einem Boxenelement einen Schatten zuzuweisen. Sie können zwar dem rechten und unteren Rand eine Umrandung zuweisen, aber das wird nicht wie ein Schatten aussehen. Aber, wenn Sie zwei verschachtelte Elemente erzeugt haben, so können Sie dass aussenliegende Element als Schatten für das innenliegende Element verwenden. Wenn Sie zum Beispiel einen Text haben wie diesen hier (HTML):

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

Sie können das aussenliegende DIV als Schatten für das innenliegende DIV verwenden. Das Ergebnis wird so aussehen wie auf dieser Beispielseite. Zuerst weisen Sie dem BODY eine Hintergrundfarbe zu (ein helles grün hier im Beispiel) und dem innenliegenden DIV einen anderen Hintergrund (z.B. weiss-gelb):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Als nächstes verschieben Sie das innenliegende DIV mit Hilfe von margin und padding ein wenig nach links und nach unten:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Nun muss das aussenliegende DIV noch etwas nach rechts gerückt werden:

div.back {margin: 3em 0 3em 5em}

Das war es im Prinzip auch schon! Sie können dem innenliegenden DIV noch eine Umrandung zuweisen wenn Sie möchten. Oder Sie legen noch einen bestimmten Innenabstand fest, z.B.:

div.section {border: thin solid #999; padding: 1.5em}

Sie können die Schattengrösse jetzt nach Belieben anpassen.

Text mit Schatten

CSS besitzt eine Eigenschaft um Text Schatten zuzuweisen. Dafür existieren vier Werte: die Farbe des Schattens, die horizontzale Einrückung (positiv bedeutet nach rechts) , die vertikale Einrückung (positiv bedeutet nach unten) und die Schärfe (0 bedeutet scharf). Zum Beispiel:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Besitzt dieser Text einen Schatten?

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 4 Apr 2002;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM