View dabblet.css
/**
* Local links in <iframe srcdoc> don’t seem to work
*/
View dabblet.css
/**
* Non-interpolatable properties in animation
*/
@keyframes foo {
from { --foo: yellow }
to { --foo: green }
}
body {
View dabblet.css
/**
* <input type=file> does not work in <button> in Firefox
*/
input {
font-size: 50px;
}
View dabblet.css
/**
* Two column <dl> with two lines of CSS! Thank you Grid Layout!
* Limitation: Breaks if we have multiple consecutive <dt>s or <dd>s
*/
dl {
display: grid;
grid-template: auto / 10em 1fr;
}
View dabblet.css
/**
* Elliptical border radius
*/
div {
position: absolute;
top: 50px; left: 50px;
height: 100%;
border: 40px solid black;
border-color: skyblue orange yellowgreen indianred;
View dabblet.css
/**
* Spec figure for border-color lists
*/
div {
position: absolute;
top: 50px; left: 50px;
height: 100%;
border: 40px dotted black;
border-color: skyblue orange yellowgreen indianred;
View dabblet.css
/**
* Case for styling scrollbars
*/
body { background: black }
div {
width: 200px;
height: 200px;
border: 1px solid gray;
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
View dabblet.css
div {
background: linear-gradient(to bottom, yellow, green);
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,0.25);
font-size: 300px;
font-weight: bold;
}
u {
View dabblet.css
/**
* tr + positioning
*/
tr {
position: relative;
outline: 1px solid black;
}
table {