Dezenter Text-Schatten mit geringem Versatz
Text-Schatten
.text {
text-shadow:1px 1px 5px #888;
}
Text-Schatten mit Versatz nach rechts unten
Text-Schatten
.text {
text-shadow:5px 5px 10px #888;
}
Gelber Text-Schatten
Text-Schatten
.text {
text-shadow:0 0 10px yellow;
}
Text-Schatten ohne Blur-Radius
Text-Schatten
.text {
color:#ffffff;
text-shadow:0 1px 0 #888;
}
Kombination mehrerer Text-Schatten ohne Blur-Radius
Text-Schatten
.text {
color: #000;
text-shadow: 1px 1px 0 #eee, 2px 2px 0 #000
}
Invertierter Text-Schatten bei dunkler Schrift
Text-Schatten
.text {
background:#666;
color: #222;
text-shadow: 0px 2px 3px #888;
}
Glühender Text-Schatten
Text-Schatten
.text {
color: #ffffff;
background: #000;
text-shadow: 1px 1px 15px #ffffff;
}
Text-Schatten eingraviert
Text-Schatten
.text {
color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;
}
Text-Schatten graviert
Text-Schatten
.text {
color: #666;
background: #000;
text-shadow: 2px 2px 5px #ffffff;
}
Neon-Effekt durch Kombination mehrerer Text-Schatten
Text-Schatten
.text {
color: #ffffff;
overflow: hidden;
background: #000;
text-shadow: 0 0 20px #ffffff, 2px 2px 10px #ffffff,
2px 2px 10px #ff00de, 2px 2px 40px #ff00de,
2px 2px 70px #ff00de, 2px 2px 80px #ff00de,
2px 2px 100px #ff00de;
}
Outline-Text
Text-Schatten
.text {
color: #000;
background: #000;
text-shadow: 0 0 5px #ffffff;
}
Verschmierter Hintergrund
Text-Schatten
.text {
color: #000;
text-shadow: 0 0 50px #000;
}
3D-Text durch Kombination mehrerer Textschatten
Text-Schatten
.text {
color: #fff;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}
Retro-Text durch Kombination mehrerer Textschatten
Text-Schatten
.text {
color: #333;
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
}