LeaVerou

/**
 * Learning CSS3
 * background-clip
 */

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

LeaVerou

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

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

LeaVerou

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

LeaVerou

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

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

LeaVerou

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

LeaVerou

/**
 * text-shadow when letters are overlapping
 */

font: bold 800% 'Palatino Linotype', Palatino, Georgia, serif;
text-align: center;
letter-spacing: -.3em;
text-shadow: 0 .5em hsla(0,0%,50%,.5);
color: rgba(255,0,100,.5);

LeaVerou

/**
 * Regain default button styling by CSS overrides. Possible?
 */

button {
	background: red; /* we can't remove this */
	background: initial; /* failed */
	background: none; /* failed */
	/* anything else? */
}

LeaVerou

/**
 * Typing animation with pure CSS. 
 * Works best in browsers supporting the ch unit.
 */

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
	font: bold 200% Consolas, Monaco, monospace;

LeaVerou

/**
 * Move in a circle without wrapper elements
 * Idea by Aryeh Gregor, simplified by Lea Verou
 */

@keyframes rot {
	from {
		transform: rotate(0deg)
		           translate(-150px)
		           rotate(0deg);

LeaVerou

/**
 * Testcase
 * Should be true on a 13.3" LCD at 1280x800
 */

html { background: red }

@media (min-resolution: 112dpi) and (max-resolution: 113dpi) {
	html { background: lime }
}