Beispiel:CSS-mask-4a.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">
	<title>Masken 4.a</title>
    <style>
html, body {
    margin: 0;
		font-family: arial;
}

html {
    height: calc(100vh - 0.5em); 
    overflow-y: hidden;	
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Marienburg_%28Malbork_castle%29.jpg/2560px-Marienburg_%28Malbork_castle%29.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}		

h1 {
  text-align: center;
	font-size: 4em;
	color: navy;
}
footer {
	grid-row: 3/4;
	background-color: white;
  mask-image: linear-gradient(transparent, black 30%);
  display: grid;
	grid-template-rows: 1fr 1fr 1fr; 	
}
footer button {
	grid-row: 2/3;
	width: 5em; 
	height: 2em;
	margin-inline: auto;
	position: relative;
	top:0;
	background: orange;
	border: thin solid hsl(30 100% 30%);
	font-size: 1.25em;
	border-radius: 0.25em;
  box-shadow:0px 10px 0px 0px hsl(30 100% 50%), 
      0px 0px 10px 0px hsl(30 100% 30% / 0.4);	
}
button:focus{
  outline:none;
}
button:active{
  box-shadow: 0px 5px 0px 0px hsl(30 100% 50%);
  top:5px;
}
footer p {
	grid-row: 3/4;
	text-align:center;
}


body {
  display: grid;
	grid-template-rows: 1fr 1fr 1fr; 
  height: 100vh;
}

</style>
</head>
<body>
    <h1>Marienburg mit <code>mask-image</code></h1>
    <p></p>
		<footer>
    	<button type="button">Login</button>
    	<p>
			<a rel="license" href="https://commons.wikimedia.org/wiki/File:Marienburg_(Malbork_castle).jpg">
      	Marienburg (Malbork castle), Polen von Simon Ciminski
      </a>  (CC BY-SA 3.0)
      </p>
	</footer>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mask-4a.html&oldid=98516“