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
 */
 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;
	flex-direction: column;
	padding: 1em 2em 1em 1em;

maxw3st

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -148;
	}
}

maxw3st

/**
 * “Body Border, Rounded Inside” without images or extra elements
 	Modified from Lea Verou: http://dabblet.com/gist/5377617 for soft inner edge.
 */

div {
	width: 10em;
	height: 5em;
	padding: 1em;
	border-radius: 1em;

maxw3st

/**
 * “Body Border, Rounded Inside” without images or extra elements by Lea Verou
 */

div {
	width: 10em;
	height: 5em;
	padding: 1em;
	border-radius: 10px;
	margin: 100px;