Beispiel:CSS3 text-shadow-anti-aliasing.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<link href="http://fonts.googleapis.com/css?family=Monoton|Codystar|Megrim" rel="stylesheet">
		<title>text-shadow</title>
		<style>
h2 {
 color: #fff;
 background-color: #999;
 padding: 10px;
 font-weight: bold;
}
h2.mit {
 text-shadow: 0 0 1px rgba(0,0,0,0.5);
}
h2.schwarzweiss {
 color: #000;
 background-color: #fff;
 text-shadow: 0 0 1px rgba(0,0,0,0.5);
}

		</style>
	</head>
	<body>
		<h1>Anti-Aliasing von <code>text-shadow</code></h1>
		<main>
		<h2 class="mit">Anti-Aliasing mit text-shadow</h2>
<h2 class="schwarzweiss">Anti-Aliasing ohne text-shadow</h2>
            <p>In diesem Beispiel erzielt man eine Art Antialiasing-Effekt (Kantenglättung), die den hellen Text auf dem dunklen Untergrund schärfer erscheinen lässt. Umgekehrt, bei dunklem Text auf hellem Hintergrund, sieht man dann die eigentliche "Kantenglättung" des Textes. </p>
		</main>
	</body>
</html>