Beispiel:CSS-mix-blend-mode-1.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>mix-blend-mode - 1</title>
<style>
h2 {
  font-size: 10em;
  color: #c32e04;
  text-align:center;
  line-height: 10%;
}

span {
  mix-blend-mode: multiply;
  display: inline-block;
  margin-left:-0.18em;
}

h2.screen span {
	 mix-blend-mode: screen;
}

span:nth-of-type(even) {
	color: #dfac20;
}

span:nth-of-type(3n+1) {
	color: #306f91;
}

</style>   

</head>

<body>

  <h1>mix-blend-mode</h1>
  <pre>mix-blend-mode: multiply;</pre>
  <h2>
    <span>S</span><span>e</span><span>l</span><span>f</span><span>H</span><span>T</span><span>M</span><span>L</span>
  </h2>

  <pre>mix-blend-mode: screen;</pre>
  <h2 class="screen">
    <span>S</span><span>e</span><span>l</span><span>f</span><span>H</span><span>T</span><span>M</span><span>L</span>
  </h2>  

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mix-blend-mode-1.html&oldid=68497“