basic layout, defilement horizontal

dabblet.css

/* basic layout, defilement horizontal */

nav {float:left;}
article {overflow:auto;white-space:nowrap;}

/* makup */
html {display:table;height:100%;width:100%;table-layout:fixed;}
body {display:table-cell;vertical-align:middle;
text-shadow:-1px -1px 0px #999;
background:gold;background:
linear-gradient(30deg,transparent,rgba(0,0,0,0.025),transparent),
linear-gradient(-55deg,transparent,rgba(0,0,0,0.025),transparent),
linear-gradient(0deg,white,gold,gold,gold,white);
background-size:1em 0.5em,0.5em 1em,100%;
background-position:0.75em  0, 0.5em 0.5em, top;
;
margin:0;font-family:georgia;}
header,footer {text-align:center;
background: linear-gradient(45deg,transparent,#333,transparent),
linear-gradient(-45deg,transparent,#333,transparent);
background-color:orange;
box-shadow:0 0 3px black;
background-size:15px 20px;
padding:5px;color:white; }
section {box-shadow:inset 0 0 3px black;}
nav {width:200px;}
article {background-color:orange;background-image:
linear-gradient(30deg,transparent,rgba(0,0,0,0.05),transparent) ,
linear-gradient(-55deg,transparent,rgba(0,0,0,0.05),transparent);
background-size:1em 0.5em,0.5em 1em;
box-shadow:0 0 3px black;
animation:glisse 50s infinite;
animation-play-state: paused;
overflow-x:scroll;

 }
article:hover {animation:glisse 50s infinite;
animation-play-state:running;}
article:after {content:" Gcyrillus' CSS";font-size:3em;color:#333,padding:0 0.25em;display:inline-block;text-indent:0.25em;line-height:480px;}
img {vertical-align:top;border:1px solid;}
h2, ul {padding:0;margin:1em 0;text-align:center;}
li {display:block;line-height:1.6em;box-shadow:0 2px 3px;background:rgba(255,255,255,0.3);margin:0 1px;}
li:hover {background:rgba(150,0,0,0.5);box-shadow:inset 0px -2px 3px -1px #333; }
a {text-decoration:none;color:#333;display:inline-block;}
:target:after, :target:before {content:attr(title);display:block;
background:white linear-gradient(180deg,turquoise,white,tomato);
font-style:italic;font-family:tahoma;
box-shadow:0 0 2px ;margin:0.5em 0.25em;
padding:0 0.25em;
border-radius:5px;}
:target:before {content:attr(data-copy);}
@keyframes glisse {
45%, 55% {text-indent:-5810px;}
0%,5%,100% {text-indent: 3px;margin-bottom:-1em;}
}

dabblet.html

<header><h1>Mode lorempixel</h1></header>
<section>
<nav>
<h2>titre 2</h2>
<ul><li><a href="#">Home</a></li><li><a href="#about" id="about" data-copy="Photos: lorempixel"title="CSS Layout: Gcyrillus">&Agrave; propos</a></li><li><a href="#">Oeuvres</a></li><li><a href="#">Contact</a></li>	</ul>
</nav>
<article>
	<img src="http://lorempixel.com/640/480/fashion/1" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/2" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/3" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/4" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/5" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/6" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/7" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/8" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/9" alt="mode" />
	<img src="http://lorempixel.com/640/480/fashion/10" alt="mode" />
</article>
</section>
<footer>
	<p>Image de lorempixel.com </p>
</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}