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 {
View dabblet.css
/**
* conic-gradient() bug (unitless 0 doesn't work, 0% does)
*/
background: conic-gradient(yellowgreen 40%, #f06 0);
min-height: 100%;
View dabblet.css
/**
* Dynamic :target
*/
body > * {
font-size: 200%
}
div { background: #eee }