michanismus

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

michanismus

/**
 * Frosted glass effect with filters
 */

* { padding: 0; margin: 0 }
body, html { min-height: 100%; }

body, div:after {
	background: url('http://devslovebacon.com/images/bacon-bg.jpg') center;
}

michanismus

/**
 * Learning CSS3
 * Multiple backgrounds, basic linear gradients
 */

html {
	background: linear-gradient(black, #444);	
	background-color: #222;
	height: 100%;
}

michanismus

/**
 * Learning CSS3
 * border-image
 */

html { 
	min-height:100%;
	background: white url(http://leaverou.github.com/chainvas/img/background.jpg);
}

michanismus

/**
 * Learning CSS3
 * RGBA/HSLA, border-radius, box-shadow, text-shadow
 */

html { 
	min-height:100%;
	background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg') center;
}

michanismus

/**
 * Learning CSS3
 * Transitions & transforms
 */

html { 
	min-height:100%;
	background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
	background-size: cover;
}

michanismus

/**
 * Masking an image with a gradient (answer to question)
 */

div {
	width: 200px; height: 200px;
	background: linear-gradient(white, hsla(0,0%,100%,0)),
		url(http://placekitten.com/200/200);
}

michanismus

/**
 * 3D cube
 */

body {
	perspective: 99999px;
}

body > section {
	display: inline-block;

michanismus

/* Teardrop kitty - By @LeaVerou */

.teardrop {
	display: inline-block;
	overflow: hidden;
	border-radius: 50%;
	border-top-left-radius: 0;
	transform: translateY(10%) scale(.8) rotate(45deg);
}

michanismus

/**
 * Tucked corners with one element
 */

html {
	background: url('http://www.red-team-design.com/wp-content/uploads/2012/10/wood.png')
}

body {
	width: 500px;