n
/
elizabeth-website-sketch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP - Test using CSS clipping, blend mode over an image

This commit is contained in:
n loewen 2023-09-20 12:32:42 -07:00
parent 17888e7724
commit 7aa4f4612e
2 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -8,6 +8,11 @@
</head> </head>
<body> <body>
<div id="cliptest">
<img src="https://placekitten.com/200/200">
</div>
<div class="main"> <div class="main">
<div class="monogram"> <div class="monogram">
<div class="column"> <div class="column">

13
style.css
View File

@ -64,4 +64,17 @@ h1 {
font-weight: bold; font-weight: bold;
font-size: 1.7rem; font-size: 1.7rem;
margin-top: 1em; margin-top: 1em;
}
#cliptest {
width: 200px;
height: 200px;
clip-path: polygon(0 0, 0 100%, 100% 100%);
background: hsl(50, 90%, 50%);
}
#cliptest img {
filter: grayscale(100%);
/* mix-blend-mode: multiply; */
mix-blend-mode: overlay;
} }