Text mit Schatten
![[Bildschirmfoto]
Text mit Schatten [Bildschirmfoto]
Text mit Schatten](img/box_und_textschatten.png)
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.
Beispiele
Dieser Text dient nur zur Demonstration.
<span style="text-shadow: -1px -1px 0px #00FFFF; font-size: 35px;"> Text </span>
Dieser Text dient nur zur Demonstration.
<span style="text-shadow: 3px 5px 0px #59BFFF; font-size: 325px;"> Text </span>
Dieser Text dient nur zur Demonstration.
<span style="text-shadow: -7px -7px 2px #EF14FF; font-size: 35px;"> Dieser Text dient nur zur Demonstration. </span>
Dieser Text dient nur zur Demonstration.
<span style="text-shadow: 0px 0px 8px #FFFF00; color: #FFD700; font-size: 35px;"> Text </span>
Dieser Text dient nur zur Demonstration.
<span style="text-shadow: Yellow 0 0 6px, Red 5px 5px 3px; font-size: 35px; color: Red;"> Text </span>
Dieser Text dient nur zur Demonstration.
<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>
Dieser Text dient nur zur Demonstration.
<span style="color: #E7E7E7; text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;"> Text </span>
Dieser Text dient nur zur Demonstration.
<span style="background: none repeat scroll 0 0 #DBDBDB; color: #CCCCCC; text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;"> Text </span>
Dieser Text dient nur zur Demonstration.
<span style="background: none repeat scroll 0 0 #CCCCCC; color: #DBDBDB; text-shadow: 0 -1px 1px #FFFFFF, 0 1px 1px #666666;"> Text </span>
Dieser Text dient nur zur Demonstration.
<span style="background: none repeat scroll 0 0 #EEEEEE; color: #707070; text-shadow: 3px 3px 0 #EEEEEE, 5px 5px 0 #707070;"> Text </span>
Tipp
