Multiple arrière-plan

dabblet.css

/**
 * Multiple arrière-plan
 */

html{
width:100%;
height:100%;
background: radial-gradient(circle,#ccc,#111) fixed;
font:1em sans-serif;
}

section{
width:1000px;
height:800px;
margin:100px auto;
padding-top:1px;
}
/*
footer{
height:500px;
background:linear-gradient(limegreen,yellow);
}
*/
h1{
margin-top:50px;
color:#fff;
text-shadow:1px 1px 3px rgba(0,0,0,.5);
font-size:3.2em;
}
h1 span{
display:block;
font-size:.5em;
color:#222;
text-shadow:0 1px 0px rgba(255,255,255,.3);
}

#bloc{
float:left;position:relative;

width:485px;
height:300px;
padding:5px;
margin:20px;
background:
linear-gradient(left,black,transparent 1.5%,transparent 98.5%, black),
linear-gradient(black,transparent 1.5%, transparent 98.5%, black),
url('http://dev.iamvdo.me/Bugdroid.png') no-repeat, 
url('http://subtlepatterns.com/patterns/starring.png');
background-clip:border-box;
background-size:auto,auto,/*auto,*/150%,auto;
background-position:top,top,0 20px,top;
border-radius:3px;
border:10px solid #181818;
box-shadow:0 -1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(255,255,255,.3) inset,0 1px 0 black,0 80px 10px -50px rgba(0,0,0,.5);
}
section p a{
display:inline-block;
padding:.2em .5em;
font-size:1em;
color:#333;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,.4);
background:linear-gradient(hsl(80,68%,66%),hsl(80,68%,46%));
border:1px solid rgba(0,0,0,.5);
border-radius:2px;
box-shadow:0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(255,255,255,.8) inset;
}
section p a:hover,section p a:focus{
background:linear-gradient(hsl(80,68%,76%),hsl(80,68%,46%));
}
section p a:active{
background:linear-gradient(hsl(80,68%,66%),hsl(80,68%,36%));
box-shadow:0 1px 0 rgba(255,255,255,.5),0 1px 1px rgba(0,0,0,.8) inset;;
border:;
}
/*
div::after{
content:url('http://dev.iamvdo.me/Bugdroid200.png');
position:absolute;left:600px;
}
div::before{
content:url('http://subtlepatterns.com/patterns/starring.png');
position:absolute;left:900px;
}
*/

div::after{
content:'';
position:absolute;top:-10px;left:-10px;
width:515px;height:331px;
background:linear-gradient(15deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 100%);
}

dabblet.html

<section>
<div id="bloc"></div>
<h1>Bugdroid<span>joue avec les feuilles de styles</span></h1>
<p><a href="#footer">En savoir plus</a></p>
</section>
<footer id="footer"></footer>

settings.json

{"view":"split","prefixfree":"1","page":"css"}