maxw3st

/**
 * Simple folded corners
 */

div {
	background: yellowgreen; /* fallback */
	background: linear-gradient(45deg, rgba(0,0,0,.4) 50%, transparent 0) 100% 0 / 25px 25px no-repeat,
	            linear-gradient(-135deg, transparent 18px, yellowgreen 0) 0 / auto; /* ceil(25/sqrt(2)) = 18 */
	            
	padding: 1em;

maxw3st

/**
 * Static interpolation via paused animations
 * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
 */

@keyframes foo {
	from { background: red }
	to { background: yellowgreen }
}

maxw3st

/**
 * Static interpolation via paused animations
 * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
 */

@keyframes foo {
	from { background: red }
	to { background: yellowgreen }
}

maxw3st

/**
 * 3D cube via @LeaVerou  http://lea.verou.me/2014/04/dynamically-generated-svg-through-sass-a-3d-animated-rgb-cube/
 */
 
body {
	perspective: 600px;
	perspective-origin: 300px -90px;
}

.cube, .cube:before, .cube:after,

maxw3st

/**
 * Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
 * Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
 * Another good idea from @LeaVerou.
 */

body {
	background: #ccc51c;
	min-height: 100%;
}

maxw3st

**
 * CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
 	answer via: @meyerweb. but doesn't work in IE9. the solution below will, but it's brute force and not DRY.
 */
/* body {perspective: 10000px;} */
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;} 
li {
	list-style: none;
	/*display: inline-block;*/
	padding: 1em 1em 1em 2em;

maxw3st

/**
 * CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
 	answer via: @meyerweb
 */
 body {perspective: 10000px;}
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;}
li {
	list-style: none;
	display: inline-block;
	padding: 1em 2em 1em 2em;

maxw3st

/**
 * CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
 	answer via: @meyerweb
 */
 body {perspective: 10000px;}
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;}
li {
	list-style: none;
	display: inline-block;
	padding: 1em 2em 1em 2em;

maxw3st

/**
 * CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
   I used flex box to solve this. "flex-direction:column-reverse;	" reverses the stacking order of the li elements.
 */

div {
	
	display: inline-flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;

maxw3st

/**
 * CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
   I used flex box to solve this. "flex-direction:column-reverse;	" reverses the stacking order of the li elements.
 */

div {
	
	display: inline-flex;
	flex-direction: column;
	padding: 1em 2em 1em 1em;