Beispiel:CSS3 text-shadow-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>