LeaVerou

background: 
  linear-gradient(63deg, #131313 5px, transparent 5px) 0 5px,
  linear-gradient(243deg, #131313 5px, transparent 5px) 10px 0,
  linear-gradient(63deg, #242424 5px, transparent 5px) 0 10px,
  linear-gradient(243deg, #242424 5px, transparent 5px) 10px 5px,
  linear-gradient(63deg, #1d1d1d 5px, transparent 5px) 0 15px,
  linear-gradient(243deg, #1d1d1d 5px, transparent 5px) 10px 10px,
  linear-gradient(63deg, #1a1a1a 5px, transparent 5px) 0 20px,
  linear-gradient(243deg, #1a1a1a 5px, transparent 5px) 10px 15px,
  linear-gradient(#1b1b1b 5px, #1c1c1c 5px, #1c1c1c 10px, transparent 10px, transparent 15px, #222 15px, #222 20px);

LeaVerou

/**
 * Polyfill for the vw, vh, vm units
 * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/
 * @author Lea Verou
 */

(function() {

if(!window.StyleFix) {
	return;

LeaVerou

<p>Yooohooo</p>

LeaVerou

/**
 * Syntax highlighting test
 */

@media screen {
	body { background: silver; }
}

html, body { height: 100% }

LeaVerou

<div class="outer right"><div>This</div></div>
<div class="outer wrong"><div>NOT this</div></div>

LeaVerou

/* Experiments with stroke-dasharray */
circle {
	stroke: hsl(200, 10%, 20%);
	stroke-opacity: .9;
	fill: transparent;
	stroke-width: 31.8;
}

LeaVerou

/**
 * Previewer test
 */

background: #f06;
background: linear-gradient(left bottom, 
	    hsla(340, 100%, 50%,.7), yellow);
background: url(http://placekitten.com/330/340);
content: '\2665';
min-width: 100px;

LeaVerou

background-color:silver;
background-image: 
	radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(0    150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(50%  100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
	radial-gradient(100% 50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
	radial-gradient(0    50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;

LeaVerou

/* Japanese cube pattern */

background-color:#556;
background-image: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
    linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;

LeaVerou

/* your title goes here */
background-color:silver;
background-image: 
	radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(0    150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(50%  100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
	radial-gradient(100% 50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
	radial-gradient(0    50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size