Texteffekte mit CSS3

Seit CSS3 hat man nicht nur die Möglichkeit Multiple-Backgrounds zu benutzen, sondern auch Mehrfach das text-shadow Attribut zu nutzen. Dieses führt zu schönen Text Effekten. Die Parameter bei der Verwendung von text-shadow sind:

text-shadow: <Verschiebung x-Richtung><Verschiebung y-Richtung><Stärke Weichzeichner><Farbe>;

Neon

.neon {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff, 0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}

Giftig

.giftig {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #06ff00,
0 0 70px #06ff00,
0 0 80px #06ff00,
0 0 100px #06ff00,
0 0 150px #06ff00;
}

Feuer

.feuer {
color: black;
text-shadow: 0px 0px 4px #fff,
0px -5px 4px #FF3,
2px -10px 6px #FD3,
-2px -15px 11px #F80,
2px -25px 18px #F20;
}

3D Brille

.dreiDBrille {
color:rgba(255,0,0,0.5);
background:#fff;
text-shadow: 8px 0px 0 rgba(0,255,0,0.5);
}

3D Text

.dreiDText {
background:#404040;
color:#fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,0.1),
0 0 5px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.3),
0 3px 5px rgba(0,0,0,0.2),
0 5px 10px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.2),
0 20px 20px rgba(0,0,0,0.15);
}

Letter

.letterpress {
background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010,
1px 1px 0px #505050;
}

DEMO

Quellen:

http://wsmithdesign.wordpress.com/2010/11/15/practical-reasons-for-css3-shadows/
http://markdotto.com/playground/3d-text/
http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

Be Sociable, Share!

Comments are closed.