greystate · August 30, 2024 13:05
diff --git a/dabblet.css b/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;
 	}
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <figure>
 <img src="https://picsum.photos/id/21/3008/2008" width="600" height="400"/>
 </figure>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"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;
	}
	}
	<!-- content to be placed inside <body>…</body> -->
	<figure>
	<img src="https://picsum.photos/id/21/3008/2008" width="600" height="400"/>
	</figure>