Max West maxw3st

## dabblet.css
/**
 * 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;

## dabblet.css
/* Pounding heart animation */

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

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

## dabblet.css
/**
 * 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%;
}

## dabblet.css
**
 * 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;

## dabblet.css
/**
 * 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;

## dabblet.css
/**
 * 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;

## dabblet.css
/**
 * 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;

## dabblet.css
/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */

@keyframes spin {
	to {
		stroke-dashoffset: -148;
	}
}

## index.html

    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Sliced Image Slider Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" />
        <meta name="keywords" content="sliding, background-image, css3, panel, images, slider, fx majors, cot index charts" />
        <meta name="author" content="maxw3st via Codrops & Mary Lou" />
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Merriweather+Sans">

## slider.html
<!-- Kudos to Mary Lou on codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ for coming up with this.
	In order to retask her slider the banner text and button positioning were removed or altered to produce a different look and feel.
	You are encouraged to visit her tutorial and demo on Codrops for a view of the original 4 versions of this slider. --->

<head>
		<meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Sliced Image Slider Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" />
	/**
	* 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;
	/* Pounding heart animation */

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

	.heart {
	display: inline-block;
	font-size: 150px;
	color: #e00;
	/**
	* 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%;
	}
	**
	* 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;
	/**
	* 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;
	/**
	* Attempt for Chrome-style progress-indicator with SVG and CSS animations
	*/

	@keyframes spin {
	to {
	stroke-dashoffset: -148;
	}
	}

	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sliced Image Slider Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" />
	<meta name="keywords" content="sliding, background-image, css3, panel, images, slider, fx majors, cot index charts" />
	<meta name="author" content="maxw3st via Codrops & Mary Lou" />
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Merriweather+Sans">
	<!-- Kudos to Mary Lou on codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ for coming up with this.
	In order to retask her slider the banner text and button positioning were removed or altered to produce a different look and feel.
	You are encouraged to visit her tutorial and demo on Codrops for a view of the original 4 versions of this slider. --->

	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Sliced Image Slider Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" />