CSS3 Carrousel by Gcyrillus

dabblet.css

/* CSS3 Carrousel by Gcyrillus
no typo
 */
html {
background: #f06;
background: linear-gradient(-45deg, #fed, #f50, #cba);
}
#mysliding-box {width:506px;margin:0 auto;overflow:hidden;
}
#slider {
width:400px;height:208px;border:solid;overflow:hidden;
margin:2em 0;white-space:nowrap;text-align:right;
vertical-align:top;border-radius:1em;padding:0 50px 1em;
position:relative;box-shadow:0 0 5px #012;background: #52AAE7 ;
}
#slider #slidebox {
border-radius:1em;white-space:nowrap;position:relative;
letter-spacing:-0.25em;display:inline-block;
margin :0 -2000px;height:208px;text-align:left;
float:right;text-shadow:0 0 2px black;color:yellow;
}
#slider >  a {
position:absolute;border-bottom:solid black;border-radius:  1em 0 0  0 ;
background-image:linear-gradient(-180deg,#456 2px, #000 2px,#000 5px, #456 2px ,#def 40px );
left:0px;text-align:center;line-height:200px;top:0;height:200px;
width:50px;z-index:5;text-decoration:none;letter-spacing:2px;
text-shadow:0 0 1px #52AAE7;color:yellow;overflow:hidden;
}
#slider >   a[id='left'] {
right:0;left:auto;opacity:1;border-radius:0 1em  0 0;
background-image:linear-gradient(0deg,#456 2px, #000 2px,#000 5px, #456 2px ,#def 40px );
}
#slider    a[href='#fullleft'], #slider    a[href='#fullright'] {display:inline-block;
top:90px;left:260px;border-radius:2em;line-height:0.8em;font-size:2em;z-index:1;
height:1em;border:solid;text-align:center;width:1em;overflow:visible;
background:none;box-shadow:0 0 02px white,inset 0 0 2px white;
}
#slider    a[href='#fullright'] { left: 180px;}
#slider #slidebox div {
overflow:auto;border-radius:1em;letter-spacing:0;
display:inline-block;width:380px;height:180px;
padding:10px;vertical-align:top;background:#456;
position:relative;z-index:1;transition:1s;overflow:visible;
}
#slider #slidebox  div:after, #slider >   a[href='#fullright']:after  {
position:absolute;content:'\25b2';top:200px;width:500px;left:-50px;
text-align:center;background-image:linear-gradient(0, transparent 0 , #abc 231px, #fff, #abc 265px , transparent 500px);
border-top:solid black;text-shadow:0 0 2px black;color:yellow;line-height:1.5em;
}
#slider >   a[href='#fullright']:after {left:-182px;top:107px;right:0;color:white;
border-radius:0;line-height:0.8em}
img {border:solid;padding:1px;box-shadow:0 0 2px black;background:#52AAE7;}
#slider #slidebox > p:target + div {z-index:4;}
#slider #slidebox  #last {background:transparent;width:0;padding:0;transition-duration: 0;
transition-delay: 100000s;transition-timing-function: linear;z-index:15;position:relative;
}
#slider > a:active {color:red;
text-shadow:
0 0 1px #52AAE7,0 0 1px #52AAE7,0 0 1px #52AAE7,0 0 1px #52AAE7,0 0 1px #52AAE7,
0 0 2px #52AAE7,0 0 2px #52AAE7,0 0 2px #52AAE7,0 0 2px #52AAE7,0 0 2px #52AAE7;}
#slider .left:active ~  #slidebox  #last {
transition:10s;margin-left:2000px; margin-right:2000px;}
#slider .right:active ~  #slidebox  #last {
transition:10s;margin-right:-2000px;margin-left:-2000px; }
/* rest chrome */
a#fr:active ~  #slidebox  #last
 { 
 margin:0px ;transition:margin  0s  ;
 }
a#fl:active  ~  #slidebox  #last { 
 margin:0px 2000px 0 0;transition:margin  0s ;
 }
 /* reset others */
#slider a[href='#fullright']:active ~  #slidebox  #last { margin:0px;transition:  0s infinite ;}
#slider a[href='#fullleft']:active  ~  #slidebox  #last { margin:0px 2000px 0 0;transition: 0s infinite;}

dabblet.html

<div id="mysliding-box">
	<div id="slider">
			<a href="#right" class="right" >&#9668;</a><a href="#fullright" id="fr" > &laquo;</a><a href="#fullleft" id="fl" >&raquo;</a><a href="#left" id="left" class="left">&#9658;</a>
		<div id="slidebox">
			<div><p>un</p>
			<p><img src="http://lorempixel.com/380/121/" alt=""/></p>
			</div>
			<div><p>deux</p>
			<p><img src="http://lorempixel.com/380/120/" alt=""/></p>
			</div>
			<div ><p>trois</p>
			<p><img src="http://lorempixel.com/380/119/" alt=""/></p>
			</div>
			<div><p>quatre</p>
			<p><img src="http://lorempixel.com/379/121/" alt=""/></p>
			</div>
			<div><p>cinq</p>
			<p><img src="http://lorempixel.com/381/120/" /></p>
			</div>
			<div><p>six</p>
			<p><img src="http://lorempixel.com/379/120/" /></p>
			</div>
			<div id="last"  ></div>				
		</div>
	</div>
</div>
<p>Chrome, bugs as usual (on reset methode to full left or right)</p>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}