×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

mix-blend-mode example

0
0
 
0
Language: HTML
Posted by: Lars Wichmann
Added: Feb 2, 2021 11:21 PM
Views: 4739
Tags: background blend color mixed mode
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor.
  6. -->
  7. <html>
  8.     <head>
  9.         <title>TODO supply a title</title>
  10.         <meta charset="UTF-8">
  11.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.         <style>
  13.             header {
  14.                 overflow: hidden;
  15.                 height: 100vh;
  16.                 background: url(https://www.w3schools.com/html/pic_mountain.jpg) 50%/cover;
  17.               }
  18.  
  19.               p {
  20.                 color: white;
  21.                 font: 900 35vmin/50vh arial;
  22.                 text-align: center;
  23.                 mix-blend-mode: difference;
  24.                 filter: drop-shadow(0.05em 0.05em black);
  25.               }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <header>
  30.             <h2 contentEditable role='textbox' aria-multiline='true' >Edit me here</h2>
  31.         </header>
  32.         <div>TODO write content</div>
  33.     </body>
  34. </html>
  35.  

Write a comment

To post comments, please log in or register.