Ruslan2230

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

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

.image-slider > div {

Ruslan2230

/**
 * 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);
}

Ruslan2230

/**
 * Elastic transitions
 */

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

.callout {

Ruslan2230

/**
 * Pseudorandom stripes
 */

background: hsl(20, 40%, 90%);
background-image: 
	linear-gradient(90deg, #fb3 11px, transparent 0),
	linear-gradient(90deg, #ab4 23px, transparent 0),
	linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

Ruslan2230

/**
 * Checkerboard with SVG
 */

background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;

Ruslan2230

/**
 * Polka dot
 */

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
                  radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

Ruslan2230

/**
 * Blueprint grid
 */

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                  linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,

Ruslan2230

/**
 * Subtle stripes
 */

background: #58a;
background-image: repeating-linear-gradient(30deg, 
              hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
              transparent 0, transparent 30px);

height: 100vh;

Ruslan2230

/**
 * Test: color stops with two locations
 * PASS if green stripes, FAIL if red
 */

background: red;
background: repeating-linear-gradient(-45deg, limegreen 0 20px, green 20px 60px);
min-height: 100%;

Ruslan2230

/**
 * Diagonal stripes - repeating-linear-gradient() method
 */

background: repeating-linear-gradient(60deg, 
              #fb3, #fb3 15px,
              #58a 0, #58a 30px);

height: 100%;