Easter Eggz

dabblet.css

/**
 * Easter Eggz
 */
body{
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	color: #757575;
}
h1{
	text-align: center;
}
a{
	color: inherit;
	text-decoration: none;
}
a:hover{
	text-shadow: 0 0 .1em #484848;
}
#egg{
	position: relative;
	z-index: 1;
	margin: 100px auto;
	width: 200px;
	height: 238px;
	background-color: #eab92d;
	background-image: -webkit-radial-gradient(center, ellipse contain, #febf04 0%,#c79810 100%);
	background-image: -mox-radial-gradient(center, ellipse contain, #febf04 0%,#c79810 100%);
	background-image: -ms-radial-gradient(center, ellipse contain, #febf04 0%,#c79810 100%);
	background-image: -o-radial-gradient(center, ellipse contain, #febf04 0%,#c79810 100%);
	background-image: radial-gradient(center, ellipse contain, #febf04 0%,#c79810 100%);
	border-top-left-radius: 100px 148px;
	border-top-right-radius: 100px 148px;
	border-bottom-right-radius: 100px 90px;
	border-bottom-left-radius: 100px 90px;
	box-shadow: 0 0 80px rgba(0,0,0, .2);
}
/* #egg::after{
	content: '';
	position: absolute;
	z-index: 0;
	right: 10px;
	bottom: -25px;
	left: 10px;
	display: block;
	width: 180px;
	height: 50px;
	background-image: -webkit-radial-gradient(center, ellipse contain, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
} */
#knob{
	position: absolute;
	top: 130px;
	left: 0;
	right: 0;
	height: 18px;
	background-color: #ee1212;
	border-top: 1px solid #eab92d;
	border-bottom: 1px solid #eab92d;
	box-shadow: 0 0 2px #484848;
}
#knob::before, #knob::after{
	content: '';
	display: block;
	height: 24px;
	width: 20px;
	background-color: #ee1212;
	border: 1px solid #eab92d;
	border-top-left-radius: 10px 14px;
	border-top-right-radius: 10px 14px;
	border-bottom-right-radius: 10px 14px;
	border-bottom-left-radius: 10px 14px;
	box-shadow: 0 0 2px #484848;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-ms-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
#knob::before{
	margin: -14px 0 0 117px;
}
#knob::after{
	margin: 0 0 -14px 123px;
}
#egg:hover #knob::before, #egg:hover #knob::after{
	-webkit-transform: rotate(20deg);
}
#egg:hover #knob::before{
	margin-left: 123px;
}
#egg:hover #knob::after{
	margin-left: 117px;
}

dabblet.html

<h1><a href="http://blog.corentin-hatte.eu/defi-3-easter-eggs/">Défi #3 : Easter Eggs</a></h1>
<div id="egg">
	<div id="knob"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}