Beispiel:CSS3 linear-gradient-4.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" />
		<title>Unterstreichungen</title>
		<style>
			h2 {
				background-repeat: repeat-x;
				background-position: left bottom;
				padding-bottom: 3px;
			}
			h2 + h2 {
				margin-top: 1em;
			}
			h2.kurz {
				background-size: .5em 2px;
				background-image: linear-gradient(to right, black 50%, transparent 50%);
			}
			h2.lang {
				background-size: 1em 2px;
				background-image: linear-gradient(to right, black 50%, transparent 50%);
			}
			h2.länger {
				background-size: 1.5em 2px;
				background-image: linear-gradient(to right, black 75%, transparent 50%);
			}
			h2.strichpunkt {
				background-size: 20px 2px;
				background-image: linear-gradient(to right, black 10px, transparent 10px,
															transparent 14px, black 14px,
															black 16px, transparent 16px);
			}
			h2.sos {
				background-size: 96px 2px;
				background-image: linear-gradient(to right, black 2px, transparent 2px,
															transparent 6px, black 6px,
															black 8px, transparent 8px,
															transparent 12px, black 12px,
															black 14px, transparent 14px,
															transparent 18px, black 18px,
															black 28px, transparent 28px,
															transparent 32px, black 32px,
															black 42px, transparent 42px,
															transparent 46px, black 46px,
															black 56px, transparent 56px,
															transparent 60px, black 60px,
															black 62px, transparent 62px,
															transparent 66px, black 66px,
															black 68px, transparent 68px,
															transparent 72px, black 72px,
															black 74px, transparent 74px,
															transparent 96px);
			}
		</style>
	</head>
	<body>
<h1>verschiedene Unterstreichungen</h1>
<p>Die Eigenschaft border-style bietet derzeit noch nicht die Möglichkeit, z.B. Unterstreichungen zu individualisieren. Mit <code>linear-gradient</code> haben Sie eine Alternative.</p>
<h2 class="kurz">kurze Striche (Abstand und Strich gleichlang)</h2>
<h2 class="lang">lange Striche (Abstand und Strich gleichlang)</h2>
<h2 class="länger">längere Striche (Strich länger als Abstand)</h2>
<h2 class="strichpunkt">Strichpunktlinien</h2>
<h2 class="sos">SOS</h2>

	</body>
</html>