Instantly share code, notes, and snippets.

View 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;
View dabblet.css
/**
* No browser seems to support calc() in grid-column-end properly
*/
div {
display: grid;
grid-template: 1fr / repeat(10, 1fr);
height: 200px;
}
View 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;
}
View dabblet.css
/**
* Odd flex behavior on <summary> in Safari
*/
summary {
display: flex;
}
summary strong { background: yellow; }
summary span { background: pink; }
View dabblet.css
/**
* The problem with brightness()
*/
body {
display: flex;
}
div {
width: 150px;
View dabblet.css
/**
* Converting between colors with filters
*/
div div {
width: 200px;
height: 200px;
background: var(--color);
xfilter: grayscale() brightness(10000%);
}
View dabblet.css
/**
* Converting between colors with filters
*/
body {
background: hsl(185, 100%, 25%);
}
div {
View 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 {
View 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;
}
View 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);