Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    header
	h2 Pure CSS halftone in 3 declarations
	p Just a super quick demo I made for a step-by-step 
		a(href='https://twitter.com/anatudor/status/1787903405295382737' target='_blank') explanation
		| . The code behind the demo itself is pretty damn awful, so if you're looking for good, accesible CSS layout code, this is not it.
main
	section.expl
		p.view(style=`--i: 0`) Set a grey to white gradient 
			code background
			| . Give it a small 
			code background-size
			|  (by default, this repeats to cover the entire element). This is the 
			em pattern part
			|  (small, repeating pattern parts). We could also use thin blurry stripes - 
			code linear-gradient
			| , rays - 
			code repeating-conic-gradient
			| , rings - 
			code repeating-radial-gradient
			| . See 
			a(href='https://codepen.io/thebabydino/pen/qBGWXNR' target='_blank') this demo
			|  for examples.
		p.view(style=`--i: 1`) Add another grey to white gradient layer covering the entire element. This is the 
			em map part
			| . Where the map is  
			em darker, 
			|  it will make the pattern 
			em thicker
			| . This could even be an actual image - 
			code url(myimg.jpg)
			| .
		p.view(style=`--i: 2`)
			code multiply
			|  the two 
			code background
			|  layers. The blurry dots pattern looks now darker where the map is darker than where the map is lighter. 
			code multiply
			|  literally means multiply corresponding decimal representations of percentage RGB channel values (for example, 
			code 50%
			|  grey has all channel values used in computations) for each pair of corresponding pixels in the two layers.
		p.view(style=`--i: 3`) 
			code contrast()
			|  with values 
			code >1
			|  pushes darker greys (that is, darker than a 
			code 50%
			|  grey, which is dead in the middle between black and white) towards black and the other lighter greys towards white. A large enough value pushes them all the way to either black or white. The darker blurry dots have more of the blur around them pushed to black than the lighter ones.
	pre.code
		span.token--decl
			span.token--prop background
			span.token--punc :
			|  
			span.token--val.token--list
				span.token--item.highlight.view(style=`--i: 1`)
					span.token--func linear-gradient
					span.token--punc (
					span.token--args
						span.token--arg.token--ang
							span.token--num 90
							span.token--unit deg
						span.token--punc ,
						|  
						span.token--arg.token--hex #888
						span.token--punc ,
						| 
						span.token--arg.token--hex #fff
					span.token--punc )
				span.token--punc.view(style=`--i: 1`) ,
				|  
				span.token--item.highlight.view(style=`--i: 0`)
					span.token--func radial-gradient
					span.token--punc (
					span.token--args
						span.token--arg.token--keyw closest-side
						span.token--punc ,
						|  
						span.token--arg.token--hex #777
						span.token--punc ,
						|  
						span.token--arg.token--hex #fff
					span.token--punc )
					|  
					span.token--pos.token--len
						span.token--num 0
					span.token--sep /
					|  
					span.token--size
						span.token--len
							span.token--num 1
							span.token--unit em
						|  
						span.token--len
							span.token--num 1
							span.token--unit em
			span.token--punc ;
		span.token--decl.highlight.view(style=`--i: 2`)
			span.token--prop background-blend-mode
			span.token--punc :
			|  
			span.token--val.token--keyw multiply
			span.token--punc ;
		span.token--decl.highlight.view(style=`--i: 3`)
			span.token--prop filter
			span.token--punc :
			|  
			span.token--val
				span.token--func contrast
				span.token--punc (
				span.token--arg.token--num 21
				span.token--punc )
	section.half
		.view(style=`--i: 0`)
		.view(style=`--i: 1`)
		.view(style=`--i: 2`)
		.view(style=`--i: 3`)
footer
	p
		strong One more thing.
		|  If you like the Maths and Physics infused CSS, canvas and SVG work that I've been putting out for over a decade, you can support it by being a cool cat and becoming a patron on 
		a(href='https://www.patreon.com/anatudor' target='_blank') Patreon
		|  or with a one time donation on 
		a(href='https://ko-fi.com/anatudor' target='_blank') Ko-fi
		| . Or at least by sharing this to show the world what can be done on the web these days... because I think it's pretty damn cool!
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
$s: .5em;

@property --k {
	syntax: '<integer>';
	initial-value: 0;
	inherits: true
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body, header, main, section, pre { display: grid }

html { min-height: 100% }

body {
	grid-gap: $s;
	grid-template-rows: max-content 1fr max-content;
	justify-self: center;
	padding: $s;
	width: Min(51em, 100%);
	background: #c4b7d0;
	font: clamp(.75em, 1vw + 1vh + .5em, 1.5em)/ 1.25 
		ubuntu, trebuchet ms, sans-serif;
	animation: k 20s steps(4) infinite;
	
	@supports (scale: Round(3, 2)) {
		width: Round(down, min(51em, 100%), 1em);
	}
}

@keyframes k { 80%, 100% { --k: 4 } }

header, main, footer {
	grid-gap: inherit;
	padding: inherit
}

header, footer { font-family: handlee, purisa, comic sans ms, cursive }

header { align-self: end }

h2 { text-align: center; }

pre, .expl { padding: inherit }

main {
	grid-template-columns: 
		repeat(auto-fit, minmax(Min(100%, 19em), 1fr));
	place-self: center;
	border-radius: $s;
	box-shadow: 0 13px 13px -8px #40344a;
	background: #3a3043;
	color: #ededed;
	
	a { color: hotpink }
}

main p, div { grid-area: 1/ 1 }

section, p { background: inherit }

code, pre {
	font-family: ubuntu mono, consolas, monaco, monospace
}

p code {
	display: inline-block;
	padding: 0 2px;
	background: hsla(0, 0%, 0%, .25);
}

.expl { grid-column: 1/ -1 }

.view {
	--sel: calc(1 - abs(sign(var(--k) - var(--i))));
	z-index: var(--sel);
	opacity: calc(var(--k) - var(--i) + 1)
}

.highlight {
	background: hsla(50, 100%, 13%, var(--sel))
}

pre {
	align-content: start;
	container-type: inline-size;
	box-shadow: 
		inset 0 0 2px hsla(0, 0%, 100%, .85), 
		0 20px 68px hsla(0, 0%, 0%, .85);
	background: #2b213a;
	line-height: 1.25;
	
	span { font-size: 4.5cqi }
}

.token {	
	&--item {
		&::before { content: '\A   ' }
	}
	
	&--punc + &--len {
		&::before { content: '\A     ' }
	}
	
	&--keyw + &--punc + &--arg {
		//&::before { content: '\A       ' }
	}
	
	&--prop { color: #ed82ed }
	
	&--func { color: #9370ed }
	
	&--keyw { color: #87defa }
	
	&--ang, &--len, &--num { color: #00ed7f }
	
	&--hex { color: #dede00 }
}

.half {
	min-height: 12em;
	
	.view {
		grid-area: 1/ 1;
		border-radius: inherit;
		background: var(--lyr, #{unquote(' ')}) 
			radial-gradient(closest-side, #777, #fff) 0/ 1em 1em;
		
		&:nth-child(n + 2) {
			--lyr: linear-gradient(90deg, #888, #fff), 
		}
		
		&:nth-child(n + 3) { background-blend-mode: multiply }
		
		&:nth-child(4) { filter: contrast(21) }
	}
}

:is(header, footer) a {
	color: mediumvioletred;
	font-weight: 700
}

Frontend Forever App