yangg

/* Pounding heart animation */

@keyframes pound {
	to { transform: scale(1.4); }
}

.heart {
	display: inline-block;
	font-size: 150px;
	color: #e00;

yangg

/**
 * Links
 */

body {
	background: #FFDEDB;
}

a {
	display: inline-block;

yangg

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

yangg

/**
 * Flexible multiline definition lists with 2 lines of CSS
 */

dt, dd { display: inline; margin: 0; }

dd:after {
	content: '\A';
	white-space: pre;
}

yangg

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

yangg

/**
 * Typing animation with pure CSS
 * Revised. Browser support (as of Feb 2012): Firefox, IE10
 */

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

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

yangg

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button;