zulaica
6/2/2017 - 9:37 PM

EF Playground

EF Playground

settings.json
content_copyfile_download
{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
dabblet.js
content_copyfile_download
// alert('Hello world!');
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
dabblet.css
content_copyfile_download
/**
 * EF Playground
 */

@keyframes bgColor {
  0%   { background-color: cyan }
  25%  { background-color: magenta }
  50%  { background-color: blueviolet }
  75%  { background-color: aquamarine }
  100% { background-color: cyan }
}

html {
  width: 100vw;
  height: 100vh;
  animation: bgColor 120s infinite;
  background:
    linear-gradient(
  	  to bottom left,
  	  rgba( 220,220,220, 0.66 ) 0%,
  	  rgba( 220,220,220, 0 ) 100%
    ),
    linear-gradient(
  	  to bottom left,
  	  rgba( 55, 55, 40, 0.22 ) 0%,
  	  rgba( 155, 155, 140, 0.44 ) 40%,
  	  rgba( 255, 255, 240, 0.0625 ) 100%
    );
  color: rgba( 255, 255, 255, 0.75 );
  mix-blend-mode: screen;
}

body {
  width: initial;
  height: initial;
  margin: 0;
  border: 1rem solid;

  /** Forced positioning for dabblet **/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}