bg cross and blocks

transparency blocks as background. With fancy live css editor for trying things out.

by Laurens Maneschijn

HTML

<div class="box crossed"></div>
<div class="box crossed crossed_repeat"></div>
<hr>
<div class="box blocked"></div>
<div class="box blocked blocked_repeat"></div>
<hr>
<div class="box blocked2"></div>
<div class="box blocked2 blocked2_repeat"></div>
<hr>

<details class="css_ui" open><summary>edit css vars</summary>
	<details data-selector=":root" open><summary></summary>
		<div class="css_line" data-key="--override-color1" data-type="color">
			<input type="checkbox"><input type="color" value="#ff0000"><input type="range"><code></code>
		</div>
		<div class="css_line" data-key="--override-color2" data-type="color">
			<input type="checkbox"><input type="color" value="#00ff00"><input type="range"><code></code>
		</div>
		<div class="css_line" data-key="--override-color3" data-type="color">
			<input type="checkbox"><input type="color" value="#0000ff"><input type="range"><code></code>
		</div>
		<div class="css_line" data-key="--override-color4" data-type="color">
			<input type="checkbox"><input type="color" value="#ff00ff"><input type="range"><code></code>
		</div>
		<div class="css_line" data-key="--override-linecolor" data-type="color">
			<input type="checkbox"><input type="color" value="#000000"><input type="range"><code></code>
		</div>
		<div class="css_line" data-key="--override-linewidth" data-type="number" data-unit="px">
			<input type="checkbox"><input type="range" value="1" min="0" max="10" step="0.1"><code></code>
		</div>
		<div class="css_line" data-key="--override-tilesize" data-type="number" data-unit="px">
			<input type="checkbox"><input type="range" value="20"><code></code>
		</div>
	</details>
	<details data-selector=".crossed"><summary></summary>
		<div class="css_line" data-key="--override-color1" data-type="color">
			<input type="checkbox"><input type="color" value="#ff0000"><input type="range"><code></code>
		</div>
		<div class="css_line" data-key="--override-linecolor" data-type="color">
			<input type="checkbox"><input type="color"...

CSS

.box {
	display: inline-block;
	margin: 5px;
	width: 100px;
	height: 100px;
	outline: 1px dotted #80808080;
	resize: both;
	overflow: auto;
	vertical-align: top;
}

.crossed {
	--bgcolor: var(--override-color1, rgba(255, 0, 255, 0.1));
	--linecolor: var(--override-linecolor, black);
	--linewidth: var(--override-linewidth, 0.8px);
	background:
		linear-gradient(
			to top left,
			var(--bgcolor) 0%,
			var(--bgcolor) calc(50% - var(--linewidth)),
			var(--linecolor) 50%,
			var(--bgcolor) calc(50% + var(--linewidth)),
			var(--bgcolor) 100%
		),
		linear-gradient(
			to top right,
			var(--bgcolor) 0%,
			var(--bgcolor) calc(50% - var(--linewidth)),
			var(--linecolor) 50%,
			var(--bgcolor) calc(50% + var(--linewidth)),
			var(--bgcolor) 100%
		);
}

.crossed.crossed_repeat {
	--tilesize: var(--override-tilesize, 20px);
	background-size: var(--tilesize) var(--tilesize);
}

.blocked {
	--color1: var(--override-color1, rgba(255, 0, 255, 0.1));
	--color2: var(--override-color2, rgba(0, 0, 255, 0.1));
	--color3: var(--override-color3, rgba(255, 0, 255, 0.1));
	--color4: var(--override-color4, rgba(0, 0, 255, 0.1));
	--linecolor: var(--override-linecolor, black);
	--linewidth: var(--override-linewidth, 0px);
	background:
		linear-gradient(
			to top,
			var(--color1) 0%,
			var(--color1) calc(50% - var(--linewidth)),
			var(--linecolor) 50%,
			var(--color2) calc(50% + var(--linewidth)),
			var(--color2) 100%
		),
		linear-gradient(
			to right,
			var(--color3) 0%,
			var(--color3) calc(50% - var(--linewidth)),
			var(--linecolor) 50%,
			var(--color4) calc(50% + var(--linewidth)),
			var(--color4) 100%
		);
}

.blocked.blocked_repeat {
	--tilesize: var(--override-tilesize, 20px);
	background-size: var(--tilesize) var(--tilesize);
}

.blocked2 {
	--color1: var(--override-color1, rgba(255, 0, 255, 0.1));
	--color2: var(--override-color2, rgba(0, 0, 255, 0.1));
	--color3: var(--override-color3, rgba(255, 0, 255, 0.1));
	--color4: var(--override-color4, rgba(0, 0, 255,...

JavaScript

console.clear();

document.body.addEventListener('input', (e) => {

	if (e.target.getAttribute('type') == 'range') {
		e.target.setAttribute('value', e.target.value);
	}

	let el_ui = e.target.closest('.css_ui');
	let el_line = e.target.closest('.css_line');
	if (!el_line) {
		return;
	}
	let el_selector = el_line.closest('[data-selector]');
	let el_style = el_line.querySelector('style');
	let el_checked = el_line.querySelector('input[type="checkbox"]');
	let el_color = el_line.querySelector('input[type="color"]');
	let el_range = el_line.querySelector('input[type="range"]');
	let el_result = el_line.querySelector('code');

	let selector = el_selector ? el_selector.getAttribute('data-selector') : ':root';
	let key = el_line.getAttribute('data-key').trim().replace(/[^a-zA-Z0-9-_]/g,'');

	if (!el_style) {
		el_style = document.createElement('style');
		el_line.appendChild(el_style);
	}
/*
	if (!el_checked.checked) {
		el_result.innerText = key;
		el_style.innerText = '';
		return;
	}
*/
	if (el_line.getAttribute('data-type') === 'color') {
		let color = el_color.value || '#000000';
		let aa = el_range ? Math.round((parseInt(el_range.value, 10) || 0) / 100 * 255).toString(16).padStart(2, '0') : ''; 
		let value = color + aa;
		el_style.innerText = `${selector} { ${key}: ${value} ; }`;
		el_result.innerText = `${key}: ${value};`;
	}

	if (el_line.getAttribute('data-type') === 'number') {
		let unit = el_line.getAttribute('data-unit') || '';
		let value = el_range.value + unit;
		el_style.innerText = `${selector} { ${key}: ${value}; }`;
		el_result.innerText = `${key}: ${value};`;
	}
	el_result.style.opacity = el_checked.checked ? '1' : '0.3';
	if (!el_checked.checked) {
		el_style.innerText = '';
	}

});
document.querySelectorAll('.css_line input').forEach((el) => {
	el.dispatchEvent(new Event('input', { bubbles: true }));
});