Web Style Sheets
CSS TIPS & TRUCS

SCHADUW KADER

CSS2 bezit geen eigenschappen om een schaduw aan een kader toe te voegen. U kunt proberen aan de rechterkant en onderkant een rand toe te voegen, maar dat ziet er niet correct uit. Echter, als u twee onderdelen heeft die op elkaar zitten, dan kunt u de buitenste als schaduw voor de binnenste gebruiken. Bijvoorbeeld als u de volgende tekst heeft (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>

U kunt de buitenste DIV gebruiken als een schaduw voor de binnenste. Het resultaat zou misschien op een afzonderlijke pagina kunnen lijken. Geef eerst aan de BODY een achtergrond (licht groen in dit voorbeeld), de buitenste DIV een enigszins donkerder achtergrond (groen-grijs) en de binnenste DIV nog een andere achtergrond (b.v. geel-wit):

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

Daarna, gebruik makend van marges en uitvulling, verschuift u de binnenste DIV naar links en omhoog ten opzichte van de buitenste DIV:

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

U moet ook de buitenste DIV een beetje naar rechts verschuiven. En indien u veelvoudige onderdelen heeft, wilt u vermoedelijk ook wat ruimte tussen hen in:

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

Dat is het eigenlijk. U kunt een rand rond de binnenste DIV toevoegen indien u wilt. U zult vermoedelijk ook binnenin wat uitvulling willen, b.v.:

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

Natuurlijk kunt u de afmeting van de schaduw naar uw smaak aanpassen.

Tekst schaduw

CSS heeft de eigenschap om een schaduw aan tekst toe te voegen. Er zijn vier argumenten: de kleur van de schaduw, de horizontale verschuiving (positief betekent naar rechts), de verticale verschuiving (positief betekent naar beneden) en de scherpte (0 betekent een scherpe schaduw). Bijvoorbeeld:

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