Beispiel:CSS3 text-shadow-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<link href="http://fonts.googleapis.com/css?family=Chewy" rel="stylesheet" type="text/css">
<title>text-shadow</title>
<style>
p {
font: bold 5em Helvetica, Arial, Sans-Serif;
color: white;
padding: 0.2em;
}
#eins {
text-shadow: 0 0 5px black;
}
#zwei {
text-shadow:
1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
}
#drei {
font-family: Chewy;
color: yellow ;
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow:
1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
}
#drei::first-letter { color: lime; }
</style>
</head>
<body>
<h1>Verwendung von <code>text-shadow</code></h1>
<main>
<h2>Text-Effekt: Umriss mit <code>text-shadow</code></h2>
<p id="eins">Texteffekt: Umriss</p>
<p id="zwei">Texteffekt: Umriss</p>
<p id="drei">Texteffekt: Umriss</p>
</main>
</body>
</html>