Beispiel:CSS3 text-shadow-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<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">
<title>text-shadow</title>
<style>
h1, body { background-color: #666; color: white; }
p {
font: bold 5em Helvetica, Arial, Sans-Serif;
padding: 0.2em;
margin: 0em;
}
#eins {
color: yellow;
text-shadow:
1px 1px blue,
2px 2px blue,
3px 3px blue;
top: 0; left: 0;
transition: all 0.3s ease-out;
}
#eins:hover {
position: relative; top: -3px; left: -3px;
text-shadow:
1px 1px blue,
2px 2px blue,
3px 3px blue,
4px 4px blue,
5px 5px blue,
6px 6px blue;
}
#zwei {
text-shadow:
1px -1px 0px hsl(0 0% 50% / 1),
2px -2px 0px hsl(0 0% 55% / 1),
3px -3px 0px hsl(0 0% 60% / 1),
4px -4px 0px hsl(0 0% 65% / 1),
5px -5px 0px hsl(0 0% 70% / 1),
6px -6px 0px hsl(0 0% 75% / 1),
7px -7px 0px hsl(0 0% 80% / 1),
8px -8px 0px hsl(0 0% 85% / 1),
9px -9px 0px hsl(0 0% 90% / 1);
}
#drei {
text-shadow:
1px -1px 0px hsl(0 0%, 70% / 1),
2px -2px 0px hsl(0 0% 65% / 1),
3px -3px 0px hsl(0 0% 60% / 1),
4px -4px 0px hsl(0 0% 55% / 1),
5px -5px 0px hsl(0 0% 50% / 1),
6px -6px 0px hsl(0 0% 45% / 1),
7px -7px 0px hsl(0 0% 40% / 1),
8px -8px 0px hsl(0 0% 35% / 1),
9px -9px 0px hsl(0 0% 30% / 1);
}
#vier {
font-family: Garamond, serif;
text-shadow:
0 1px 0px hsl(0 0% 50% / 1),
0 2px 0px hsl(0 0% 55% / 1),
0 3px 0px hsl(0 0% 60% / 1),
0 4px 0px hsl(0 0% 65% / 1),
0 5px 0px hsl(0 0% 70% / 1),
0 6px 0px hsl(0 0% 75% / 1),
0 7px 0px hsl(0 0% 80% / 1),
0 8px 0px hsl(0 0% 85% / 1),
0 9px 0px hsl(0 0% 90% / 1);
}
</style>
</head>
<body>
<h1>3d-Effekte mit <code>text-shadow</code></h1>
<p id="eins">3D-Texteffekt</p>
<p id="zwei">3D-Texteffekt</p>
<p id="drei">3D-Texteffekt</p>
<p id="vier">3D-Texteffekt</p>
</body>
</html>