LeaVerou

/** 
 * Diagonal stripes with repeating gradients
 */

background: repeating-linear-gradient(60deg, deeppink, deeppink 35px, gold 35px, gold 70px);
height: 100%;

LeaVerou

/** 
 * Polka dot pattern
 */

background: radial-gradient(circle, white 10%, transparent 10%),
  radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size:100px 100px;

LeaVerou

/** 
 * Checkerboard pattern
 * (a bit buggy in Webkit, see bug #54615)
 */

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

LeaVerou

/* SVG experiments */
svg {
	margin: 50px;
	background: #eee;
}

line {
	stroke: slategray;
	stroke-width: 2;
	marker: url(#circle);

LeaVerou

/** 
 * Diagonal stripes
 */

background: repeating-linear-gradient(60deg, white, white 35px, #8b0 35px, #8b0 70px);
min-height: 100%;

LeaVerou

/**
 * The first commented line is your dabblet’s title
 */

html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height:100%;
}

LeaVerou

/**
 * Dabblet logo
 */
 
@font-face {
	font-family: 'Dabblet';
	src: url(http://dabblet.com/img/dabblet.ttf);
}

html { background: white }

LeaVerou

/**
 * Dabblet avatar
 */
 
@font-face {
	font-family: 'Dabblet';
	src: url(/img/dabblet.ttf);
}

html { background: white }

LeaVerou

/**
 * Incrementable test
 */

background: #f06;
background: linear-gradient(45deg, #f203f6 80%, yellow 100px);
min-height:100%;
z-index: 1;
border-width: 1px 2px 3px 10px;

LeaVerou

/**
 * Do browsers fire the resize event for CSS resize?
 */

#resize {
	overflow: hidden;
	resize: both;
	width: 200px;
	min-height:200px;
	background:deeppink;