dabblet

Log in My profile Log out
New dabblet
Save Save as new Save anonymously
View gist View full page result LeaVerou
?
/**
 * HSL problems
 */

body, div {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	padding: 1em;
	flex-flow: column;
}

div::before,
div::after {
	content: attr(style);
	font: bold 120% Consolas, Monaco, monospace;
}

div::before {
	color: white;
}
<div style="background: hsl(60, 100%, 50%)"></div>
<div style="background: hsl(60, 100%, 70%)"></div>
<div style="background: hsl(230, 100%, 50%)"></div>
<div style="background: hsl(230, 100%, 70%)"></div>
// alert('Hello world!');
(ABCabc123&@%) (ABCabc123&@%)
Loading…