Bert
Bos, leider
stijl-activiteitenCopyright © 1994–2021 W3C® Privacy
Geschreven 4 april 2002;
laatste update wo 06 jan 2021 05:40:49 UTC
Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik
Zie ook de index van alle tips.
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.
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 }