Skip to content

Instantly share code, notes, and snippets.

@Grafikart
Created August 11, 2022 21:53
Show Gist options
  • Save Grafikart/b66c512360515b0727f7253a0b6b8f68 to your computer and use it in GitHub Desktop.
Save Grafikart/b66c512360515b0727f7253a0b6b8f68 to your computer and use it in GitHub Desktop.
CSSBattle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSSBattle canvas</title>
<style>
:root {
--image: url("https://cssbattle.dev/targets/97@2x.png")
}
html,
body {
font-size: 18px;
color: hsl(0 0% 100% / .4);
}
body {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, 400px);
justify-content: center;
gap: 40px 20px;
background: hsl(235 19% 13%);
padding-top: 40px;
font-family: sans-serif;
}
#main::after {
display: none;
}
.canvas {
width: 400px;
height: 300px;
position: relative;
}
.canvas::before {
position: absolute;
top: -1.4rem;
left: 0;
}
#main::before {
content: 'Rendu';
}
.ref::before {
content: 'Référence';
}
.diff::before {
content: 'Différence';
}
.overlay::before {
content: 'Superposition';
}
.canvas::after {
content: '';
position: absolute;
inset: 0;
background: var(--image) center center / 100% 100% no-repeat;
}
.overlay::after {
opacity: .2;
}
.diff::after {
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="canvas" id="main">
<!-- Le challenge commence ici -->
<div class="demo"></div>
<!-- / Fin challenge -->
</div>
<div class="canvas ref"></div>
<div class="canvas diff"></div>
<div class="canvas overlay"></div>
<script>
const sourceHTML = document.querySelector('#main').innerHTML
document.querySelectorAll('.canvas').forEach(c => {
c.innerHTML = sourceHTML
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment