Skip to content

Instantly share code, notes, and snippets.

@ryandejaegher

ryandejaegher/codeswing.json

Last active June 28, 2023 16:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryandejaegher/a45558d86e5cbd75daebe542069c0aa5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryandejaegher/a45558d86e5cbd75daebe542069c0aa5 to your computer and use it in GitHub Desktop.
Download ZIP
Duotone with css only #image #css
Raw
codeswing.json
{
"scripts": [],
"styles": []
}
Raw
index.pug
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
body
div
div
<img src="https://framerusercontent.com/projects/z8c9WptRiJH8tBsRWA0E/assets/512/kGC8CB2JfoBN02rkDLJLHEf3V4.jpg?Expires=1688055482&amp;Key-Pair-Id=APKAIDY47RVYVKGA6NJQ&amp;Signature=FaJi0YW~tpnL~3SPojr3t08zvGAIF0VbuaoDoCNwZ03GEwtiFE8DKTsY-UNzXtJFnyJ~Wakqj~6ULOsg3FPnMpxK2VAGnip8d9DdXVa1poD2labNX0ObfGIMJx-nGhZAOjxSDRrKNXh1OUQqzkbpIodd~KG5mDss8bVdFucYGUi2uXefU6yWUtRPUAzv03KxU7URdxTUh4LGeX4BGwPTQH9gdZXh9XMlKEzlKn1kveMeWnz-TbYhhlxbbcCO9fmHN9h5r245XZsEXOg4XMAXZc5NW~K5N5zqUSTlWi5pDJubyhM2mSBK0nzjE7zDn26UHS8vfMdcR-9Tgdqi6O9xag__" alt="" srcset="https://framerusercontent.com/projects/z8c9WptRiJH8tBsRWA0E/assets/512/kGC8CB2JfoBN02rkDLJLHEf3V4.jpg?Expires=1688055482&amp;Key-Pair-Id=APKAIDY47RVYVKGA6NJQ&amp;Signature=FaJi0YW~tpnL~3SPojr3t08zvGAIF0VbuaoDoCNwZ03GEwtiFE8DKTsY-UNzXtJFnyJ~Wakqj~6ULOsg3FPnMpxK2VAGnip8d9DdXVa1poD2labNX0ObfGIMJx-nGhZAOjxSDRrKNXh1OUQqzkbpIodd~KG5mDss8bVdFucYGUi2uXefU6yWUtRPUAzv03KxU7URdxTUh4LGeX4BGwPTQH9gdZXh9XMlKEzlKn1kveMeWnz-TbYhhlxbbcCO9fmHN9h5r245XZsEXOg4XMAXZc5NW~K5N5zqUSTlWi5pDJubyhM2mSBK0nzjE7zDn26UHS8vfMdcR-9Tgdqi6O9xag__ 512w, https://framerusercontent.com/projects/z8c9WptRiJH8tBsRWA0E/assets/1024/kGC8CB2JfoBN02rkDLJLHEf3V4.jpg?Expires=1688055482&amp;Key-Pair-Id=APKAIDY47RVYVKGA6NJQ&amp;Signature=X~IwRv7fbvGz8300-an8vnEJfRWMuTAw6IXNkpiPNNwbPwYqWCXR4Wal7V3AYQkfLDvW5FEmUJBGBIrjgJ4fYDv6bxWpbLT-3dfUzXxjO-TzS7UtJVFvC-zT2n4tlGCo5rjrNhLAVAO4ib6kVyC7vki~O5XfgpNl-Nhp9fg-JL5SnhEsTGJwKykJ-aMo7MPq1VKf4pS4YTahLp9Av6hJ1t7UrNGqxbZoiivSgYStaswqOl3bOs4AGtzXhQt0hh2GCWu-~V5~kG500T-6y9j93QAdobuOjgYjfuwdr3Qgs~G3zYmySBWakDUdd~FpXQGK7qh7KSWvptyh2YM8hPCqWQ__ 1024w, https://framerusercontent.com/projects/z8c9WptRiJH8tBsRWA0E/assets/kGC8CB2JfoBN02rkDLJLHEf3V4.jpg?Expires=1688055482&amp;Key-Pair-Id=APKAIDY47RVYVKGA6NJQ&amp;Signature=bCae1wT2Vef1TkSzeWvzlH~n8FRByWthXcIaQgUulXejJyWGmuGilzmWjJ9aeVUeDPJuycqpPBzhvZhn9poVDgSX-8vW~XTNoxpcEt1RLpb0nO~WX73cCE4fGAeNaCMvJZxgxyN5OhED-lwRdUNRK7V28yOcZT6-SOmX9fPcm~OJ0sW70Mb~2c~itnDG3IDl8mc2s3~c-J1W8wKjbwsOa~lx~~Mnx1-tL0oR0~w2bQUcbhU3LiWGTDuz5pd0~TASAmVKQyC1g6CWEeBcYV~zhebzHbYTHWsST9KSqAj832szgQnNsyXMsoae5LHPJF7PS6wSuQacchXsJ-iRL2-33A__ 1200w" sizes="calc(100vw - 40px)" loading="lazy" style="pointer-events: none; user-select: none; display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover; image-rendering: auto;">
Raw
style.less
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
div {
background: hsl(240, 50%, 50%);
width: 500px;
height: 500px;
}
div > div {
position: relative;
filter: ~"contrast(1.5) grayscale(1)";
mix-blend-mode: overlay;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment