text-shadow – Text-Effekte – CSS3 Adventskalender Tag 7

Wie schon im CSS3 Adventskalender Tag 5 über box-shadow (Schatten) beschrieben, ist die Syntax zwischen text-shadow und box-shadow gleich.

.text-shadow {
	text-shadow: 2px 2px 5px #999;
}

Ein paar Live-Demos:

text-shadow

text-shadow

bei kleiner Schrift

Das Positive an der Eigenschaft: alle Browser unterstützen sie, sogar ohne Vendor-Prefix. Das Negative: der Internet-Explorer gar nicht (auch der IE9 beta nicht) update: mit der filter-Eigenschaft „DropShadow“ kann man einige Text-Effekte wie in der Demo unten gezeigt auch im IE6-8 umsetzen.

3D-Text mit Text-Schadow

Einen CSS 3D-Text kann man mit mehreren kommagetrennten Schatten erreichen, hier ein Screenshot:

HTML:

<div class="background">
  <p class="text-shadow3d">Beispiel 3</p>
</div>

CSS:

.background {
  background-color: #000;
  color: #fff;
  font-size: 7em;
  text-transform: uppercase;
}
.text-shadow3d {
  text-shadow: 
1px 1px #fe4902, 
2px 2px #fe4902, 
3px 3px #fe4902, 
4px 4px #fe4902, 
5px 5px #fe4902, 
6px 6px #fe4902, 
7px 7px #fe4902, 
8px 8px #fe4902;
}

weitere Text-Effekt Demos

Demo-Datei zu CSS3 text-shadow (Drop-Schatten) aufrufen
Update: text-shadow für Internet Explorer mit filter: DropShadow

Browser-Support:

wird ohne Prefix unterstützt seit Safari 1.1+, Chrome 2+, Firefox 3.1+, and Opera 9.5+.
allerdings in keinem Internet Explorer… (die Filter Shadow, DropShadow, oder Glow sind meiner Meinung hier keine Alternative)

Am Tag 8 geht es im Webstandard-Blog um @font-face – Custom Fonts weiter.