gradient in content(Chrome) or background & responsive via em

dabblet.css

/* gradient in content(Chrome) or background & responsive via em */
html {height:100%;width:100%;display:table;text-align:center;font-size:20px;}
body {display:table-cell;height:100%;vertical-align:middle;
background:
repeating-linear-gradient(-45deg,gray 0,gold,gray,gold,gray 4em) repeat-y top right, 
repeating-linear-gradient( 45deg,gray 0,gold,gray,gold,gray 4em) repeat-y top left,
linear-gradient(0deg,gray,gold,gray);position:relative;
padding:0 2.5em;
background-size:2em 2em,2em 2em ,100%}
body:before{content:repeating-linear-gradient(25deg,gray 0,gold,gray,gold,gray 4em);
;height:2em;position:absolute;top:0;left:0;width:100%;}
body:after{content:'e'repeating-linear-gradient(-25deg,gray 0,gold,gray,gold,gray 4em);
display:block;height:2em;position:absolute;bottom:0;left:0;width:100%;}
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
h1,p {border:solid 1px;}

dabblet.html

<h1>before, after, linear-gradient background (or content in chrome) & responsive</h1>
<p>before semble permettre d'injecter directement un gradient CSS, celui-ci etant considerer comme une image dans chrome.</p>
<p>Le gradient dimensionner en em pourra être redimensionner via font-size sans avoir a y toucher.</p>
<p>Une pincée de mediaquerie et voilou que notre gradient est responsive.</p>
<p>C'est pas CSS3 qui laissera nos mouches tranquilles-<q>those are so dummy, isn't it ?</q></p>

dabblet.js

// alert('Hello world!');

settings.json

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