Untitled

dabblet.css

body {
	background: #1a1a1a;
	margin: 0;
	padding: 0;
	color: #EEE;
}

header {
	width: 100%;
}


a:link, a:visited, a:focus {
	color: #EEE;
	text-decoration: none;
}

#head_buttons {
	padding: 12px 6px 12px 10px;
	margin: 24px 10px 0 18px ;
	width: 100%;
	height: 110px;
	border-radius: 78px 0 0 78px;
	-moz-transition: all 0.2s ease 0s;
}

#head_buttons:hover {
	background: #2f2f2f;
	box-shadow: inset 0px 10px 4px -8px #111;
}


#head_buttons div {
	padding: 34px 24px 8px 18px;
	border-radius: 50px;
	font-size: 25px;
	color: #EEE;
	letter-spacing: 6px;
	width: 50px;
	height: 50px;
	float: left;
	margin: 10px 20px;
	text-shadow: 0 -2px 1px  #666;
}


#head_buttons .php {
	background: orange;
}

#head_buttons .css {
	background: #222222;
}

#head_buttons .html {
	background: #cc0099;
	letter-spacing: -2px;
}

#head_buttons .search {
	background: navy;
	letter-spacing: -2px;
	padding: 34px 4px 10px 32px;
	width: 60px;
	-moz-transition: all 0.5s ease 0s;
}

#head_buttons .search:hover {
	width: 250px;
}

#head_buttons .search input {
	width: 20px;
	height: 20px;
	padding: 5px 2px 5px 10px;
	border: 0;
	-moz-transition: all 0.5s ease 0s;
	border-radius: 20px;
}

#head_buttons .search input:focus {
	width: 200px;
	outline: none;
	padding: 5px 5px 5px 10px;
}


#current_area {
	clear: both;
	margin: 0 0 0 18px;
}

#current_area div {
	clear: both;
}

#current_area div div {
	padding: 20px 22px 12px;
	border-radius: 50px;
	font-size: 25px;
	color: #EEE;
	float: left;
	margin: 12px 8px;
	text-shadow: 0 -2px 1px  #666;
	display: none;
}

#current_area div:target div {
	display: inherit;
}

#current_area div:after div {
	display: none;
} 

#current_area .php div {
	background: orange;
}

#current_area .css div {
	background: #222;
}

#current_area .html div {
	background: #cc0099;
}

#current_area .search div {
	background: navy;
}

form {
	margin: 0;
	paddin: 0;
	display: inline;
}

dabblet.html

<header>
	<div id="head_buttons">
		<div class="php"><a href="#phpb">PHP</a></div>
		<div class="css"><a href="#cssb">CSS</a></div>
		<div class="html"><a href="#htmlb">HTML</a></div>
		<div class="search">
			<form method="get" action="#searchb">
				<input type="text" placeholder="o">
			</form>
		</div>
	</div>
	<div id="current_area">
		<div class="php" id="phpb">
			<div>P</div>
			<div>H</div>
			<div>P</div>
		</div>
		<div class="css" id="cssb">
			<div>C</div>
			<div>S</div>
			<div>S</div>
		</div>
		<div class="html" id="htmlb">
			<div>H</div>
			<div>T</div>
			<div>M</div>
			<div>L</div>
		</div>
		<div class="search" id="searchb">
			<div>S</div>
			<div>E</div>
			<div>A</div>
			<div>R</div>
			<div>C</div>
			<div>H</div>
		</div>
	</div>
</header>

alles nur in CSS3 gemacht :)

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}