danielmascena/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;
	position: relative;
	animation: rolling-position 10s infinite linear;
}
.points:before {
	content: "";
	display: block;
	height: 10px;
	width: 10px;
	position: absolute;
	top: 200px;
	left: 300px;
	box-shadow: 10px 10px,
		0px 10px blue;
}
.num1, .num2 {
	position: absolute;
	top: 200px;
	width: 50px;
	height: 50px;
	background: brown;
}
.num1 {
	left: 100px;
}
.num2 {
	right: 400px;
}

.num1:hover ~ .points:before{
	box-shadow: 20px 20px,
		10px 20px blue;
}
.num2:hover ~ .points:before {
	box-shadow: 0px -10px,
		-10px -10px blue;
}

@keyframes rolling-position {
	to {
		background-position: -1800px center;
	}
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<section id="fundo">
	<div class="num1">btn 1</div>
	<div class="num2">btn 2</div>
	<div class="points"></div>
</section>

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

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/

	#fundo {
	background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
	height: 300px;
	width: 1000px;
	position: relative;
	animation: rolling-position 10s infinite linear;
	}
	.points:before {
	content: "";
	display: block;
	height: 10px;
	width: 10px;
	position: absolute;
	top: 200px;
	left: 300px;
	box-shadow: 10px 10px,
	0px 10px blue;
	}
	.num1, .num2 {
	position: absolute;
	top: 200px;
	width: 50px;
	height: 50px;
	background: brown;
	}
	.num1 {
	left: 100px;
	}
	.num2 {
	right: 400px;
	}

	.num1:hover ~ .points:before{
	box-shadow: 20px 20px,
	10px 20px blue;
	}
	.num2:hover ~ .points:before {
	box-shadow: 0px -10px,
	-10px -10px blue;
	}

	@keyframes rolling-position {
	to {
	background-position: -1800px center;
	}
	}
	<!-- content to be placed inside <body>…</body> -->

	<section id="fundo">
	<div class="num1">btn 1</div>
	<div class="num2">btn 2</div>
	<div class="points"></div>
	</section>