Lea Verou LeaVerou

## dabblet.css
/**
 * Different transition on reverse
 */

p {
	width: 200px; height: 200px;
	background: yellow;
	transition: 1s;
}

## dabblet.css
/**
 * Chrome bug testcase: var() fails in -webkit-background-clip
 */

p {
	background: linear-gradient(red, orange);
	-webkit-background-clip: text;
	color: rgba(0,0,0,.1);
	font: bold 500% sans-serif;
	padding: .5em;

## dabblet.css
/**
 * Chrome bug all: unset !important;
 */
span {
	font-size: 500%;
	color: green;
	border: 2px solid red;
}


## dabblet.css
/**
 * Aspect ratio
 */

img, svg {
	background: yellow;
	max-height: 1em;
}

## dabblet.css
/**
 * Box
 */

.box {
	position: absolute;
	bottom: 300px;
	margin-top: 300px;
	xperspective: 600px;
	--width: 600px;

## dabblet.css
/**
 * border-image: SVG
 */

html { background: white }
body {
	border: 20px solid transparent;
	border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6">\
		<path fill="red" d="m 0,1 L 1,0 2,1 3,0 4,1 5,0 6,1 5,2 6,3 5,4 5,3 5,4 6,5 5,6 4,5 3,6 2,5 1,6 0,5 1,4 0,3 1,2 z" />\
	</svg>') 33.33% fill round;

## dabblet.css
/**
 * SVG cursors experiments
 */

html {
height: 100vh;
cursor: busy;
cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">\
	<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
	<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>'), not-allowed;

## dabblet.css
/**
* rotate test
*/
body {
	background: #E3516E;
}

p {
	width: 200px;
	height: 200px;

## dabblet.css
/**
 * Cannot insert emojis in input with maxlength="1"
 */

input {
	font-size: 20px;
	width: 30em;
}

## dabblet.css
/**
 * Checkbox hack with display: none?
 */

input { display: none }
label { display: inline-block; background: yellow; font: bold 300% sans-serif; }
input:checked + label { background: indianred; }