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/2/2b/Marienburg_in_Malbork_%28Polen%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>

Marienburg mit mask-image

<footer> 

   	<button type="button">Login</button>

<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)

</footer> </body> </html>

Abgerufen am 10.05.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-mask-4a.html"