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)

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: