LeaVerou’s gists

## dabblet.css
/**
 * Odd flex behavior on <summary> in Safari
 */

summary {
	display: flex;
}

summary strong { background: yellow; }
summary span { background: pink; }

## dabblet.css
/**
 * The problem with brightness()
 */

body {
	display: flex;
}

div {
	width: 150px;

## dabblet.css
/**
 * Converting between colors with filters
 */

div div {
	width: 200px;
	height: 200px;
	background: var(--color);
	xfilter: grayscale() brightness(10000%);
}

## dabblet.css
/**
 * Converting between colors with filters
 */


body {
	background: hsl(185, 100%, 25%);
}

div {

## dabblet.css
/**
 * Blending over <body>
 */

body {
	background: url('https://leaverou.github.io/talks/even-more-css-secrets/img/whisper.jpg') center / cover no-repeat gray;
	min-height: 100vh;
}

div {

## dabblet.css
/**
 * Cutout text with any color — sadly with text repetition
 */

body { margin: 0 }
main {
	background: url('https://leaverou.github.io/talks/even-more-css-secrets/img/whisper.jpg') center / cover no-repeat gray;
	min-height: 100vh;
}

## dabblet.css
/**
 * Brightness filter not implemented according to spec in Chrome?
 * https://www.w3.org/TR/filter-effects-1/#brightnessEquivalent
 * Red is correct, white is wrong.
 */

div {
	width: 90vmin;
	height: 90vmin;
	background: rgb(25, 0, 0);

## dabblet.css
/**
 * Variable fonts for non-variable weights across sizes.
 */

@import url('https://variablefonts.monotype.com/MetaVariableDemo-Set.css');

span {
	display: block;
	font-size: calc(var(--size, 1) * 100%);
	xfont-weight: calc(100 + var(--size, 1) * 100);

## dabblet.css
/**
 * Animated line headings
 */


h1 {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;

## dabblet.css
/**
 * Marching ants selection
 */

rect {
	stroke: black;
	stroke-width: 2px;
	stroke-dasharray: 5px 3px;
	animation: marching-ants .6s linear infinite;
	fill: none;