Web Style Sheets
CSS Tips & Tricks

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 }