Skip to content

Instantly share code, notes, and snippets.

@greystate

greystate/dabblet.css

Last active August 30, 2024 13:05
Show Gist options
  • Save greystate/3aff14d3c6c128fb70cf6a46ae3826aa to your computer and use it in GitHub Desktop.
Save greystate/3aff14d3c6c128fb70cf6a46ae3826aa to your computer and use it in GitHub Desktop.
Download ZIP
Image with blurred background
Raw
dabblet.css
/**
* Image with blurred background
*/
:root {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100dvh;
}
figure {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
inset: 0;
background: url(https://picsum.photos/id/21/3008/2008) center / cover no-repeat;
filter: blur(70px);
overflow: clip;
}
img {
border-radius: 20px;
z-index: 1;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<figure>
<img src="https://picsum.photos/id/21/3008/2008" width="600" height="400"/>
</figure>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment