LeaVerou’s gists

## dabblet.css
/**
 * Using calc() in <integer>
 * If yellow underneath green and blue: No calc() support
 * If yellow above green and below blue: Multiplication OK, division dropped
 * If yellow on top of both green and blue: calc() fully supported
 */

div {
	background: yellowgreen;
	border: 1px solid;

## dabblet.css
/**
 * No browser seems to support calc() in grid-column-end properly
 */

div {
	display: grid;
	grid-template: 1fr / repeat(10, 1fr);
	height: 200px;
}

## dabblet.css
/**
 * cross-fade() interpolation
 * Compare behavior of mousing out before the transition finishes with mousing out after letting the transition finish.
 */

body {
	background: url(https://placekitten.com/200/200);
	height: 99vh;
	transition: 2s;
}

## 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);