Beispiel:CSS-mask-4b.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 3.b</title> 

   <style>

html, body { 

   margin: 0;

}

html { 

   height: calc(100vh - 0.5em); 
   overflow-y: hidden;

background: #000; }


h1 { 

   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   text-align: center;

font-size: 4em; color: orange; z-index:2; }

.hero { 

 mask-image: linear-gradient(to bottom, transparent, #000),
   linear-gradient(to bottom, #000, transparent), linear-gradient(
     to bottom,
     transparent,
     #000
   ), linear-gradient(to bottom, #000, transparent), linear-gradient(to
       bottom, transparent, #000);
 mask-size: 18% 70%;
 mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
 mask-repeat: no-repeat;
 width: 100%

}

footer { 

   position: absolute;
   bottom: 0em;
   height: 10em;
   width: 100%;

background-color: black; color: white; 

 mask-image: linear-gradient(transparent, black 50%);

} footer p { padding: 5em 0 0 5em;; } footer a { 

   color: skyblue;

} </style> </head> <body>

Marienburg mit mehreren Masken

<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Marienburg_in_Malbork_%28Polen%29.jpg" alt="Marienburg" class="hero">

<footer>

<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-4b.html"