Beispiel:CSS3 box-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>box-shadow 2</title>
		<style>
a {
  color: blue;
  box-shadow:inset 0 -3px 0 -1px blue;
  padding:.25em 0;
  text-decoration: none;
  transition: all .5s ease;
}

a:hover,
a:focus {
  box-shadow:inset 0 -30px 0 skyblue;
}
li {
	margin-bottom: .5em;
}		
	
		</style>
	</head>
	<body>
		<h1>Links mit <code>box-shadow</code> gestalten</h1>
	<ul>
		<li><a class="eins" href="#">Linktext 1</a>
		</li>
		<li><a class="zwei" href="#">Linktext 1</a>
		</li>
		<li><a class="drei" href="#">Linktext 1</a>
		</li>
	</ul>

</body>
</html>