Drop Shadows für HTML-Elemente
Bilder mit Schattenschlag, sogenannten Drop Shadows, wirken einfach plastischer. Kein Wunder, dass diese Funktion in jedem ordentlichen Bildbearbeitungsprogramm zu finden ist. Schön wäre es, wenn man auch Textelemente auf Webseiten einfach mit einem solchen Effekt versehen könnte. Und tatsächlich, mit ein wenig CSS-Hilfe ist dieses möglich.
Ganz ohne graphische Hilfe ist der Effekt nicht zu erreichen, wir benötigen zwei Bilder: shadow.gif liefert uns den eigentlichen Schatten, ein weiteres Bild, shadow2.gif sorgt für die benötigten Abstände.
Die shadow2.gif sieht im Browser aus, wie eine komplett weisse Fläche. Tatsächlich besteht die Grafik aber aus einer grossen, transparenten Fläche, mit einem weissen Rahmen oben und links:
Wir benötigen nun die folgenden Style-Informationen, um den gewünschten Effekt zu erreichen:
.p-shadow {
width: 90%;
float:left;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.p-shadow div {
background: none !important;
background: url(shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
width: 90%;
float:left;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.p-shadow div {
background: none !important;
background: url(shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
Mit diesem Stylesheet können wir jetzt auf einfache Weise z.B. einen HTML-Paragraph erzeugen, der mit einem Schatten hinterlegt ist:
<div class="p-shadow">
<div>
<p>Willommen auf...</p>
</div>
</div>
<div>
<p>Willommen auf...</p>
</div>
</div>
Und so sieht das dann aus:
Willkommen auf der Webmaster Homepage!
Dieser Text basiert auf einem Artikel zum Thema Drop-Shadows bei A List Apart.