Donnerstag, 19. Mai 2022

11:18

Homepage-Tipps & -tricks für Webmaster mit CSS

Schrift mit 3D-Schatteneffekt erzeugen

Es geht also auch ohne Grafik ... ein paar Zeilen CSS reichen schon aus, um eine tolle Schrift mit Schatteneffekt z. B. als Überschrift für Ihre Homepage zu erzeugen.

Anweisung in einer ausgelagerten CSS-Datei:

#schrift, #schatten
{
width: 350px;
position: absolute;
font-family: Arial, Helvetica, Tahoma;
font-size: 48px;
}

#schrift
{
z-index: 1;
color: #FF9933;
top: 10px;
left: 10px;
}

#schatten
{
z-index: 0;
color: #000;
top: 8px;
left: 13px;
}

Anweisung im HTML-Dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/schatten.css">
</head>
<body>
<div id="schrift">Schattenschrift</div>
<div id="schatten">Schattenschrift</div>
</body>
</html>

Beispiel ansehen

Ja, Sie sehen schon richtig - es ist also kein Druckfehler! Der Text, der einen Schatten erhalten soll, muss zweimal enthalten sein, damit der 3D-Effekt auf diese Weise funktionieren kann! Allerdings hat jeder Text innerhalb des jeweiligen Divs seine eigene #id erhalten, damit die Schriften überlagert, bzw. positioniert werden können.
[ veröffentlicht am 21.02.2008 ] __________________________

zurück
 weiter



© 2007 - 2022 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:14 aktualisiert.