Text mit Schatten

Mit CSS3 können Sie Text-Elemente mit Schatten gestalten (text-shadow). Schatten sind eine gute Möglichkeit einzelne Elemente aus dem Fluss der Website speziell hervorzuheben oder um einfach einen dreidimensionalen Effekt zu erhalten.

<span style="text-shadow: px px px ; font-size: px;
 color: ">Text mit Schatten</span>

Beispiele

<span style="text-shadow: -1px -1px 0px #00FFFF; font-size: 35px;">
 Text </span>

<span style="text-shadow: 3px 5px 0px #59BFFF; font-size: 325px;">
 Text </span>

<span style="text-shadow: -7px -7px 2px #EF14FF; font-size: 35px;">
 Dieser Text dient nur zur Demonstration. </span>

<span style="text-shadow: 0px 0px 8px #FFFF00; color: #FFD700; font-size: 35px;">
 Text </span>

<span style="text-shadow: Yellow 0 0 6px, Red 5px 5px 3px; font-size: 35px; color: Red;">
 Text </span>

<span style="text-shadow:
1px 0px 1px #eee, 0px 1px 1px #ccc,
2px 1px 1px #eee, 1px 2px 1px #ccc,
3px 2px 1px #eee, 2px 3px 1px #ccc,
4px 3px 1px #eee, 3px 4px 1px #ccc,
5px 4px 1px #eee, 4px 5px 1px #ccc,
6px 5px 1px #eee, 5px 6px 1px #ccc,
6px 6px 1px #eee;">
 Text </span>

<span style="color: #E7E7E7;
    text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;">
 Text </span>

<span style="background: none repeat scroll 0 0 #DBDBDB;
    color: #CCCCCC;
    text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;">
 Text </span>

<span style="background: none repeat scroll 0 0 #CCCCCC;
    color: #DBDBDB;
    text-shadow: 0 -1px 1px #FFFFFF, 0 1px 1px #666666;">
 Text </span>

<span style="background: none repeat scroll 0 0 #EEEEEE;
    color: #707070;
    text-shadow: 3px 3px 0 #EEEEEE, 5px 5px 0 #707070;">
 Text </span>

Tipp