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);
View 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);
View dabblet.css
/**
* Animated line headings
*/
h1 {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
View dabblet.css
/**
* Marching ants selection
*/
rect {
stroke: black;
stroke-width: 2px;
stroke-dasharray: 5px 3px;
animation: marching-ants .6s linear infinite;
fill: none;