From 7aa4f4612e2bb02922095daa7f395b5cb4c04275 Mon Sep 17 00:00:00 2001 From: n loewen Date: Wed, 20 Sep 2023 12:32:42 -0700 Subject: [PATCH] WIP - Test using CSS clipping, blend mode over an image --- index.html | 5 +++++ style.css | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/index.html b/index.html index ea8e161..e859f5f 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,11 @@ + +
+ +
+
diff --git a/style.css b/style.css index 081f688..2901dd9 100644 --- a/style.css +++ b/style.css @@ -64,4 +64,17 @@ h1 { font-weight: bold; font-size: 1.7rem; 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; } \ No newline at end of file