jordangray

/*
 * Animation timeline mockup
 */

#timeline {
	background: #f9f9f9;
	font: normal 14px/18px Consolas, Courier New, Courier, monospace;
	
	height: 200px;

jordangray

/* display: run-in example (bad browser support) */

dl {
    border: 1px solid #ccc;
    overflow: hidden;
    width: 50%;
}

dt {
	display: run-in;

jordangray

# Test for formaction attribute support in Modernizer.
Modernizr.addTest 'formaction', 'formaction' of document.createElement('input')

# Shim for formaction attributes on buttons and inputs.
$.fn.shimFormAction = ->
  return this if Modernizr.formaction

  this.each ->
    $(this).find   'input,button'
           .filter '[formaction!=""][formaction]'

jordangray

/**
 * Glowing circle patches
 */

body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	height: 500px;
}

jordangray

/**
 * Splay circles from top along a circular path
 * http://stackoverflow.com/questions/18735723/spherical-motion-around-object-using-javascript
 */

@keyframes rotate {
	0% {
		top: -30px;
		left: -30px;
		transform: rotate(0deg) translateY(-150px) rotate(0deg);

jordangray

/**
 * Splay circles from top along a circular path
 * http://stackoverflow.com/questions/18735723/spherical-motion-around-object-using-javascript
 */

@keyframes rotate {
	0%, 50% {
		transform: rotate(0deg) translateY(-150px) rotate(0deg);
	}
}

jordangray

/**
 * Alternative datepicker interface
 */

body {
	background: #f06;
	background: linear-gradient(135deg, #f00, orange);
	min-height: 100%;
}

jordangray

/* SO #19125580: smiley face animation. */

fieldset {
	color: #666;
	font: 14px Segoe UI, sans-serif;
	border: 2px solid #ccc;
	width: 400px;
	margin: auto;
}

jordangray

/*
 * SO #20126262: make last inline child fill available space.
 */

div {
	display: flex;
	flex-wrap: wrap;
}

span:last-child {

jordangray

/* Star Wars opening crawl effect */

.fade {
	margin: -40px auto 0;
	max-width: 540px;
    position: relative;
    width: 50%;
    transform: perspective(20px) rotateX(7deg) translateZ(-6px);
}