diogotito/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
body{
	background: #f06;
	background: linear-gradient(45deg, #002, #125);
	min-height: 100%;
}

@keyframes girar_a_lua {
	from	{ background-position: 0px 0px, 0px 0px; }
	to		{ background-position: 0px 0px, 500px 0px; }
}

#lua {
	position: absolute;
	width: 200px;
	height: 200px;

	margin: auto;
	top: 0; bottom: 0; left: 0; right: 0;

	background: blue;

	background: radial-gradient(150px 50px, 150px 150px, rgba(255,255,255, .9) 0%, rgba(255,255,255, 0.25) 50%, rgba(0,0,0, .9) 100%),
		0px 0px / 500px 205px url("http://www.space1999.org/gallery/cgi_models_meshes/ae237g/earth-moon_surface2_2500x1250.jpg");
	animation: girar_a_lua 4s linear infinite;
	border-radius: 100px;
	box-shadow: inset 0px 0px 25px 1px black;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<body>
	<div id="lua">
	</div>
</body>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"result"}
	/**
	* The first commented line is your dabblet’s title
	*/
	body{
	background: #f06;
	background: linear-gradient(45deg, #002, #125);
	min-height: 100%;
	}

	@keyframes girar_a_lua {
	from { background-position: 0px 0px, 0px 0px; }
	to { background-position: 0px 0px, 500px 0px; }
	}

	#lua {
	position: absolute;
	width: 200px;
	height: 200px;

	margin: auto;
	top: 0; bottom: 0; left: 0; right: 0;

	background: blue;

	background: radial-gradient(150px 50px, 150px 150px, rgba(255,255,255, .9) 0%, rgba(255,255,255, 0.25) 50%, rgba(0,0,0, .9) 100%),
	0px 0px / 500px 205px url("http://www.space1999.org/gallery/cgi_models_meshes/ae237g/earth-moon_surface2_2500x1250.jpg");
	animation: girar_a_lua 4s linear infinite;
	border-radius: 100px;
	box-shadow: inset 0px 0px 25px 1px black;
	}
	<!-- content to be placed inside <body>…</body> -->
	<body>
	<div id="lua">
	</div>
	</body>