csssecrets

/**
 * box-shadow removes slider track in Chrome
 */

input { 
	box-shadow: 0 0 5px red;
}

csssecrets

/**
 * Scrolling hints
 */

ul {
	display: inline-block;
	overflow: auto;
	width: 7.2em;
	height: 7em;
	border: 1px solid silver;

csssecrets

/**
 * Elastic color
 */


html {
	background: rgb(100%, 0%, 40%);
	transition: 1s cubic-bezier(.25,.1,.2,3);
}

csssecrets

/**
 * Elastic transitions
 */

input:not(:focus) + .callout:not(:hover) {
	transform: scale(0);
	transition: .25s transform;
}

.callout {

csssecrets

/**
 * Bouncing animation
 */

@keyframes bounce {
	60%, 80%, to {
		transform: translateY(400px);
		animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }

csssecrets

/**
 * Interactive image comparison — range input version
 */

.image-slider {
	position:relative;
	display: inline-block;
}

.image-slider > div {

csssecrets

/**
 * De-emphasizing by blurring (AND dimming)
 */

main {
	transition: .6s;
	background: white;
}

main.de-emphasized {

csssecrets

/**
 * Native modal dialog (limited support)
 */

dialog::backdrop {
	background: rgba(0,0,0,.8)
}

csssecrets

/**
 * Rudimetary overlay with box-shadow
 */

.lightbox {
	position: fixed;
	top: 50%; left: 50%;
	margin: -200px;
	box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}

csssecrets

/**
 * Toggle buttons
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {