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>
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 ] __________________________