DH
David Hellmann
2011/03/12

CSS3 Text Shadow – Ein Paar Beispiele

CSS3 ist ja bekanntermaßen in aller Munde und das ist auch gut so. Lassen sich damit doch schöne Sachen machen. Hier möchte ich mal ein paar Beispiele zeigen, was man alles mit Text Shadow machen kann. Das ist reines CSS und keinerlei Grafiken werden dafür benötigt. Es gibt also Möglichkeiten mehr mit Text zu machen als einfach eine Farbe zu vergeben. Der Fantasie sind keine Grenzen gesetzt. Hier lassen sich Möglichkeiten umsetzen die in manch Grafikprogramm gar nicht so einfach zu machen wären :) Aber man sollte hier eher dem Motto folgen "weniger ist mehr" und nicht alles und jedem mit Text Shadow bombardieren. Der Reiz wäre dann sofort verloren. Am tauglichsten halte ich es bei Headlines oder besonderen Textauszeichnungen etc. Letztendlich muss man es aber selber wissen wo und wie oft man es einsetzt.

Wie immer ist es aktuell glaube ich so, dass der Internet Explorer es bis jetzt noch nicht unterstützt. In Version 9 könnte es vielleicht klappen? Also sollte man seine Sachen so anlegen, dass auch Browser die das ganze nicht unterstützen die Texte dennoch lesbar darstellen. Chrome, Firefox und Safari sollten jedoch keine Probleme mit der Darstellung haben.

HTML Code

      
        <!DOCTYPE html>
<html lang="de">
<head>	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
	<title>CSS 3 Text Shadow</title>
 
	<!-- CSS -->
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 
</head>
<body>
 
	<div class="wrapper">
		<h2 class="shadow_01">we &hearts; the wonderful css</h2>
		<h2 class="shadow_02">we &hearts; the wonderful css</h2>
		<h2 class="shadow_03">we &hearts; the wonderful css</h2>
		<h2 class="shadow_04">we &hearts; the wonderful css</h2>
		<h2 class="shadow_05">we &hearts; the wonderful css</h2>
		<h2 class="shadow_06">we &hearts; the wonderful css</h2>
		<h2 class="shadow_07">we &hearts; the wonderful css</h2>
		<h2 class="shadow_08">we &hearts; the wonderful css</h2>
		<h2 class="shadow_09">we &hearts; the wonderful css</h2>
		<h2 class="shadow_10">we &hearts; the wonderful css</h2>
	</div>
 
</body>
</html>

CSS Code

      
        h2 {
	font:bold 50px/80px Arial, Helvetica, sans-serif;
}
 
.shadow_01 {
	text-shadow: 5px 5px 0px #ddd;
}
 
.shadow_02 {
	text-shadow: 
		1px 1px 0px #ddd,
		2px 2px 0px #ddd,
		3px 3px 0px #ddd,
		4px 4px 50px #000;
}
 
.shadow_03 {
	text-shadow: 
		2px 2px 0px #fff,
		-2px -2px 0px #fff,
		-2px 2px 0px #fff,
		2px -2px 0px #fff,
		0px 0px 50px #000;
}
 
.shadow_04 {
	text-shadow: 
		2px 2px 0px #ff0,
		-2px -2px 0px #f0f,
		-2px 2px 0px #0ff,
		2px -2px 0px #0f0,
		0px 0px 50px #000;
}
 
.shadow_05 {
	text-shadow: 
		1px 1px 0px #777,
		2px 2px 0px #777,
		3px 3px 0px #777,
		4px 4px 0px #888,
		5px 5px 0px #888,
		6px 6px 0px #888,
		7px 7px 0px #999,
		8px 8px 0px #999,
		9px 9px 0px #999,
		10px 10px 0px #aaa,
		11px 11px 0px #aaa,
		12px 12px 0px #aaa,
		13px 13px 0px #bbb,
		14px 14px 0px #bbb,
		15px 15px 0px #bbb,
		16px 16px 0px #ccc,
		17px 17px 0px #ccc,
		18px 18px 0px #ccc,
		19px 19px 0px #ddd,
		20px 20px 0px #ddd,
		21px 21px 0px #ddd;
}
 
.shadow_06 {
	text-shadow: 
		1px 1px 0px #888,
		2px 2px 0px #888,
		3px 3px 0px #888,
		4px 4px 0px #888,
		5px 5px 0px #888,
		6px 6px 0px #888,
		7px 7px 0px #888,
		8px 8px 0px #ddd,
		9px 9px 0px #ddd,
		10px 10px 0px #ddd,
		11px 11px 0px #ddd,
		12px 12px 0px #ddd,
		13px 13px 0px #ddd,
		14px 14px 0px #ddd,
		15px 15px 0px #888,
		16px 16px 0px #888,
		17px 17px 0px #888,
		18px 18px 0px #888,
		19px 19px 0px #888,
		20px 20px 0px #888,
		21px 21px 0px #888;
}
 
.shadow_07 {
	text-shadow: 
		1px 0px 5px #888,
		2px 0px 5px #888,
		3px 0px 5px #888,
		4px 0px 5px #888,
		5px 0px 5px #888,
		6px 0px 5px #888,
		7px 0px 5px #888,
		8px 0px 5px #ddd,
		9px 0px 5px #ddd,
		10px 0px 5px #ddd,
		11px 0px 5px #ddd,
		12px 0px 5px #ddd,
		13px 0px 5px #ddd,
		14px 0px 5px #ddd,
		15px 0px 5px #888,
		16px 0px 5px #888,
		17px 0px 5px #888,
		18px 0px 5px #888,
		19px 0px 5px #888,
		20px 0px 5px #888,
		21px 0px 5px #888;
}
 
.shadow_08 {
	text-shadow: 
		2px 2px 0px #fff,
		-2px -2px 0px #fff,
		-2px 2px 0px #fff,
		2px -2px 0px #fff,
		3px 3px 0px #555,
		-3px -3px 0px #555,
		-3px 3px 0px #555,
		3px -3px 0px #555,
		4px 4px 0px #555,
		-4px -4px 0px #555,
		-4px 4px 0px #555,
		4px -4px 0px #555;
}
 
.shadow_09 {
	background: #333;
	text-shadow: 1px 1px 0px #555;
	padding: 10px;
}
 
.shadow_10 {
	background: #777;
	color: #ddd;
	text-shadow: 1px 1px 0px #000;
	padding: 10px;
}

Die Werte sind folgendermaßen: 1px 2px 3px #000

1px nach rechts
2px nach unten
3px weichzeichnung
Farbe: schwarz.

Der erste Wert gibt also die horizontale Position des Schattens an, der zweite Werte die vertikale Position, der dritte Wert die stärke der Weichzeichnung und der letzte Wert ist die Farbe des Schattens.

Tutorials
Tags css css3 development text shadow
comments powered by Disqus

Maybe interesting…

UP