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 überhaupt funktionieren kann! Allerdings hat jeder Text innerhalb des jeweiligen Div's seine eigene #id erhalten, damit die Schriften überlagert, bzw. positioniert werden können.
[ veröffentlicht am 21.02.2008 ] __________________________

zurück | weiter

Diese Seite wurde zuletzt am 28.04.2011 10:46 aktualisiert.

Anzeigen

Marktplatz

WebPack® 3.0: Mit über 20 Web-Applikationen wie Wordpress, phpBB Forum und MediaWiki. Ab EUR 1,49/Monat*!
[ mehr Infos ]

Mit klarmobil.de ab 9 Cent/Min. in alle Netze ohne Grundgebühr keine Vertragsbindung incl. 10 EUR Startguthaben für nur 4,95 EUR - [ jetzt wechseln und sparen! ]