LeaVerou

/**
 * Hyphenation
 */

width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;

LeaVerou

/**
 * Cropping images in a diamond shape
 */

.diamond {
	width: 350px;
	height: 350px;
	transform: rotate(45deg);
	outline: 1px solid black;
	position: relative;

LeaVerou

/**
 * Patterned borders
 */

div {
	max-width: 20em;
	padding: 1em;
	border: 1em solid rgba(0,0,0,.1);
	background: repeating-linear-gradient(-45deg, blue 0, blue 1em, transparent 0, transparent 3em),
	            repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 3em) 2.2em 0;

LeaVerou

/**
 * Scrolling hints
 */

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

LeaVerou

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

div {
	width: 100px;
	height: 100px;
	display: inline-block;
	background: gray;
	margin: 10px;

LeaVerou

<p>Yooohooo</p>

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

LeaVerou

/** 
 * Diagonal stripes
 */

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

LeaVerou

/* WebKit bug? */

a {
	-moz-transition: border-color 1s;
	-ms-transition: border-color 1s;
	-o-transition: border-color 1s;
	-webkit-transition: 1s background;

	display: block;
	height: 100px;

LeaVerou

/**
 * Colorize black element with filters
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

body {
	background: pink;
}

div {