Untitled

dabblet.css

@import url('http://fonts.googleapis.com/css?family=Rokkitt');
body{ margin:50px; }
ul, li{ margin:0; padding:0; list-style:none outside; font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif; font-size:13px; }
li{ display:inline-block; }
li a { 
	display: inline-block;
	background-color: #4D90FE;
	background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
	background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
	background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
	background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
	background-image: linear-gradient(top,#4d90fe,#4787ed);
	border: 1px solid #3079ED;
	color: white;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;

	cursor: default;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	height: 27px;
	line-height: 27px;
	min-width: 54px;
	padding: 0 8px;
	text-decoration: none;
}

li a:hover{
border: 1px solid #2F5BB7;

background-color: #357AE8;
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: linear-gradient(top,#4d90fe,#357ae8);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

li a:active{
-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0px 1px 2px rgba(0,0,0,.1);
}

#logo{
	display:block;
	position:relative;
	width:100px;
	height:100px;
	border:1px solid #999;
	border-radius:50%;
	border-bottom-left-radius:0;
	box-shadow:1px 1px 5px 1px #999;
	text-decoration:none;

	background: rgb(200,200,200);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4YzhjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNmI2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,200,200,1)), color-stop(100%,rgba(182,182,182,1)));
	background: -webkit-linear-gradient(top,  rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%);
	background:    -moz-linear-gradient(top,  rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%);
	background:     -ms-linear-gradient(top,  rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%);
	background:      -o-linear-gradient(top,  rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%);
	background:         linear-gradient(top,  rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#b6b6b6',GradientType=0 );

	-webkit-transition:all 1s ease-in-out;
	   -moz-transition:all 1s ease-in-out;
	    -ms-transition:all 1s ease-in-out;
	     -o-transition:all 1s ease-in-out;
	        transition:all 1s ease-in-out;
}

#logo:after{
	display:block;
	margin:25% 17%;
	font:bold 3em "Rokkitt", sans-serif;
	letter-spacing:-0.05em;
	color:#666;
	content:"dnl";

	-o-font-smoothing:antialiased; 
	-ms-font-smoothing:antialiased; 
	-moz-font-smoothing:antialiased; 
	-webkit-font-smoothing:antialiased; 
	font-smoothing:antialiased; 
	-o-text-stroke: 1px rgba(50,50,50,0.5);
	-ms-text-stroke: 1px rgba(50,50,50,0.5);
	-moz-text-stroke: 1px rgba(50,50,50,0.5);
	-webkit-text-stroke: 1px rgba(50,50,50,0.5);
	text-stroke: 1px rgba(0,0,0,0.2);
}

dabblet.html

<div id="logo"></div>
<ul style="margin-top:30px">
	<li><a href="#" class="logo">Logo</a></li>
	<li><a href="#" class="pin">Pin</a></li>
	<li><a href="#" class="drop">Drop</a></li>
	<li><a href="#" class="bullet">Bullet</a></li>
	<li><a href="#" class="pointer">Pointer</a></li>
</ul>

	<script>
var win = window,
    doc = win.document,
   logo = doc.getElementById("logo");
doc.addEventListener("DOMContentLoaded", function(){
	// logo
	doc.getElementsByClassName("logo")[0].addEventListener("click", function(){
		logo.style.webkitTransform = "rotate(0deg)";
	});

	// pin
	doc.getElementsByClassName("pin")[0].addEventListener("click", function(){
		logo.style.webkitTransform = "rotate(315deg)";
	});

	// drop
	doc.getElementsByClassName("drop")[0].addEventListener("click", function(){
		logo.style.webkitTransform = "rotate(135deg)";
	});

	// bullet
	doc.getElementsByClassName("bullet")[0].addEventListener("click", function(){
		logo.style.webkitTransform = "rotate(45deg)";
	});

	// pointer
	doc.getElementsByClassName("pointer")[0].addEventListener("click", function(){
		logo.style.webkitTransform = "rotate(225deg)";
	});
});

settings.json

{"view":"split","prefixfree":"1","page":"css"}