Schatten mit CSS
Stand vom 28.05.2002
Um einen einfachen Schatteneffekt zu erzeugen muss man oftmals
Grafiken verwenden, doch es geht auch einfacher, mit HTML und CSS
und dem Internet Explorer.
Sie
wollen einer Überschrift z.B. einen Schatten geben? Das ist nunmehr
kein Problem, sie haben eine Überschrift die in etwa so aussehen
soll:
devmag.com
- HTML/ CSS-Tips
Der Code für eine solche Überschrift ist recht einfach:
<div style="width:100%;
font-size:24pt; color:blue; filter:DropShadow(color=#C0C0C0, offx=5,
offy=5)">devmag.com
- HTML/ CSS</div>
Mit style= wird
das Stylesheet geöffnet, es soll eine Breite von 100% des ihm zur
Verfügung stehenden Raumes einnehmen (width:100%),
die Schriftgröße soll 24 pt betragen (font-size:24pt;)
und die Schrift soll die Farbe Blau haben (color:blue;).
Jetzt kommt eigentlich erst der wichtigste Teil des Stylesheets:
filter:DropShadow(color=grey, offx=5, offy=5)
Dieser Code bestimmt das ein fallender Schatten generiert werden
soll (DropShadow), dessen Farbe grau (grey) ist, und welches 5pt
der länge und 5 pt der Breite von der Ursprungsschrift entfernt
ist:
Bsp: diese Überschrift wäre jetzt offx=20, offy=20.
devmag.com - HTML/ CSS-Tips
Es ist auch möglich alle <h>-Tags mit dem Schatten Style
zu verändern. Dazu müssen Sie in ihr Style nur folgenden Code eingeben:
h1
{
width:100%; font-size:24pt; color:blue; filter:DropShadow(color=#C0C0C0,
offx=5, offy=5
}
Für den h2,
h3, h4, ... Tag können Sie genauso vorgehen, oder sie definieren
eine h1
Klasse, indem Sie den Stylecode so definieren:
.h1 {width:100%;
font-size:24pt; color:blue; filter:DropShadow(color=#C0C0C0, offx=5,
offy=5}.
Um jetzt das Style wirken zu lassen fügen Sie in ihren h-Tag einfach
folgendes ein:
<h1 class="h1"></h1>
(jg)
technisch
HTML