LeaVerou

/**
 * Fit in viewport demo
 */

img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

LeaVerou

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

LeaVerou

/* Animation with one keyframe */

html { background: white }
body {
	width: 100px; height: 100px;
	background: slategray;
}

html:hover > body {
	animation: 1s animation infinite;

LeaVerou

/**
 * The -Webkit-scrollbar challenge
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Make the first div’s scrollbar like the second’s 
 * without changing the styling of the div (i.e. you
 * can only change the ::-webkit-scrollbar-* rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * It doesn't matter if the second div doesn't look the same
 * after your changes, it's only there to show you how the
 * end result should look.

LeaVerou

/**
 * Lined paper that follows the text
 * Support: Chrome, FF 3.6+, Saf 5.1+, Opera 11.50+, IE10
 */

/* Just decorative */
padding: 20px;

/* The font. Try changing font-size and see how the lines

LeaVerou

/**
 * Webkit bug reduction
 * Bug originally spotted in http://dabblet.com/gist/1560717
 */


/* The font. Try changing font-size and see how the lines
   still follow the text
   In Webkit, certain numbers  */
   

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

/**
 * box-shadow vs drop-shadow
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

div {
	position: relative;
	width: 150px;
	padding: 20px;
	border: 5px dotted;

LeaVerou

/**
 * box-shadow vs drop-shadow
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

div {
	position: relative;
	width: 150px;
	padding: 20px;
	border: 5px dotted;

LeaVerou

/**
 * grayscale() and saturate() filters demo
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

img {
	transition: .5s -webkit-filter;
}

img:first-of-type {