Css-Tutorials
Css-Tutorials
Dank CSS3 ist es mittlerweile möglich, einfache, aber wirksame Texteffekte zu ermöglichen – der Fantasie sind hierbei keine Grenzen gesetzt.
Ein paar Effekte sollen an dieser Stelle inklusive Code vorgestellt werden.
Weißer Schatten mit dunklem Schein nach außen
Code css:
1 2 3 4 5 |
text-shadow:
1px 1px 0px #ddd,
2px 2px 0px #ddd,
3px 3px 0px #ddd,
4px 4px 50px #000;
|
Weißer harter Schatten
Code css:
1 2 3 4 |
background:#AAA;
color:#505050;
text-shadow:
1px 1px 0px #FFF;
|
Versetzter Schatten
Code css:
1 2 3 4 |
text-shadow:
0.2em 0.5em 0.1em #FF00B2,
-0.3em 0.1em 0.1em #00FF3A,
0.4em -0.3em 0.1em #00FFFA;
|
Flammentext
Code css:
1 2 3 4 5 6 7 8 9 |
background: #000;
color: #FFF;
padding: 30px 0 10px;
text-shadow:
0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
|