Fancy textfield

dabblet.css

/* Fancy textfield */
.fancy-textfield {
	display: inline-block;
	position: relative;
}
.fancy-textfield > .fancy-textfield-input, .fancy-textfield > .fancy-textfield-placeholder {
	color: #fff;
	font: 16px/120% Helvetica,Arial,sans-serif;
	padding: 10px 0;
}
.fancy-textfield > .fancy-textfield-input {
	background: transparent;
	border: 0;
	bottom: 0;
	box-sizing: border-box;
	left: 0;
	outline: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.fancy-textfield > .fancy-textfield-placeholder {
	
}
.fancy-textfield > .fancy-textfield-placeholder small {
	font-size: 14px;
	margin-left: 5px;
	opacity: 0.3;
}
.fancy-textfield > .fancy-textfield-input:focus + .fancy-textfield-placeholder {
	visibility: hidden;
}

/* Master bar */
.master-bar {
	background: #000;
	box-shadow: 0 3px 5px rgba(0,0,0,0.3);
	color: #fff;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	position: relative;
}
.master-bar:after {
	clear: both;
	content: '';
	display: block;
}
.master-bar:before {
	background-image: linear-gradient(45deg, transparent 50%, #000 50%),
					  linear-gradient(-45deg, transparent 50%, #000 50%),
					  linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.06) 50%),
					  linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.06) 50%);
	background-position: 0 0, 10px 0,
						 0 1px, 10px 1px,
						 0 2px, 10px 2px,
						 0 3px, 10px 3px,
						 0 4px, 10px 4px,
						 0 5px, 10px 5px;
	background-repeat: no-repeat;
	background-size: 10px;
	content: '';
	height: 45px;
	margin-top: -1px;
	position: absolute;
	top: 100%;
	width: 40px;
}

.master-bar > .master-title {
	float: left;
	position: relative;
}

/* Navbar */
.navbar {
	background: #232323;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	text-align: center;
}
.navbar:after {
	clear: both;
	content: '';
	display: block;
}

.navbar a {
	color: #eee;
	text-decoration: none;
	text-shadow: 0 1px 1px #000;
}
.navbar a:hover {
	color: #fff;
}

.navbar .brand {
	display: inline;
	font-size: 22px;
}

.navbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.navbar ul li {
	display: inline-block;
	margin-left: 5px;
}
.navbar ul a {
	display: block;
	padding: 0 10px;
}

/* Nav list */
.navlist {
	border: 1px solid #D4D4D4;
	border-radius: 4px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.3);
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.navlist > li {
	background: #fff;
	border-top: 1px solid #D4D4D4;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
}
.navlist > li:first-child {
	border-top: 0;
}
.navlist > li > a {
	background: #E2E2E2;
	color: #2841A4;
	display: block;
	margin: 0 -10px;
	padding: 0 10px;
	text-decoration: none;
}
.navlist > li > a:hover {
	background: #e6e6e6;
}

/* Draws */
.draws {
	display: -webkit-flex;
}
.draws > .draw {
	background: linear-gradient(#eee 30%, rgba(255,255,255,0)),
        		linear-gradient(rgba(255,255,255,0), #eee 70%) 0 100%,
        		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.3), rgba(0,0,0,0)),
				radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.3), rgba(0,0,0,0)) 0 100%;
	background-color: #eee;
	background-repeat: no-repeat;
	background-size: 100% 40px, 100% 40px, 100% 20px, 100% 20px;
	background-attachment: local, local, scroll, scroll;
	box-shadow: 5px 0 5px rgba(0,0,0,0.1);
	box-sizing: border-box;
	min-height: 99.9999%;
	overflow: auto;
	padding: 10px;
	position: relative;
	width: 340px;
	z-index: 10;
}
.draws > .draw.fill {
	-webkit-flex-grow: 1;
}
.draws > .draw:nth-child(2) {
	z-index: 9;
}
.draws > .draw:nth-child(3) {
	z-index: 8;
}
.draws > .draw:nth-child(4) {
	z-index: 7;
}
.draws > .draw > .draw-fill {
	margin-left: -10px;
	margin-right: -10px;
}
.draws > .draw > .draw-fill:first-child {
	margin-top: -10px;
}
.draws > .draw > .draw-fill:last-child {
	margin-bottom: -10px;
}

/* Panels */
.panel {
	background: #eee;
	border-radius: 4px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	box-sizing: border-box;
	margin: 20px auto;
	min-height: 60px;
	max-width: 600px;
	padding: 10px;
}

/* List Group */
.listgroup {
	border-bottom: 1px solid #D4D4D4;
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.listgroup > li {
	border-top: 1px solid #D4D4D4;
	padding: 10px;
}
.listgroup > li:first-child {
	border-top: 0;
}
.listgroup > li.title h2 {
	color: #A0A0A0;
	font-size: 13px;
	font-weight: bold;
	margin: 0;
	text-shadow: 0 1px 0 #fff;
}
.listgroup > li > :first-child {
	margin-top: 0;
}
.listgroup > li > :last-child {
	margin-bottom: 0;
}

/* Button */
.button {
	background-color: #79CF19;
	background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.3));
	border: 0;
	border-radius: 4px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 1px rgba(0,0,0,0.1);
	box-sizing: border-box;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	height: 25px;
	padding: 5px 10px;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.button:hover {
	background-color: #85E31B;
}
.button.primary {
	background-color: #3892E3;
}
.button.primary:hover {
	background-color: #48A3F4;
}

.button .caret {
	border-color: #000 transparent;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	display: inline-block;
}

.button-group {
	display: inline-block;
	font-size: 0;
}
.button-group .button {
	border-left: 1px solid rgba(255,255,255,0.1);
	border-right: 1px solid rgba(0,0,0,0.1);	
}
.button-group .button:first-child {
	border-left: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.button-group .button:last-child {
	border-right: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Portrait */
.portrait {
	margin: 30px;
	text-align: center;
}
.portrait img {
	background: #9B9B9B;
	border-radius: 50%;
	box-shadow: 0 1px 0 #fff;
	max-width: 150px;
	width: 100%;
}

/* Stats */
.stats {
	background: #fff;
	border: 1px solid #D4D4D4;
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.stats:after {
	content: '';
	clear: both;
	display: block;
}
.stats > .stat {
	border-right: 1px solid #D4D4D4;
	color: #9B9B9B;
	float: left;
	height: 30px;
	padding: 10px;
}
.stats > .stat:last-child {
	border-right: 0;
}
.stats > .stat > a {
	color: #9B9B9B;
	display: block;
	margin: -9px;
	padding: 10px;
	text-decoration: none;
}
.stats > .stat > a:hover {
	background: #efefef;
}
.stats > .stat strong {
	color: #2841A4;
	display: block;
	font-size: 14px;
	font-weight: bold;
}

/* Menu */
.menu {
	background: #fff;
	border: 1px solid #D4D4D4;
	border-radius: 4px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	list-style: none;
	margin: 0;
	padding: 3px 0;
	width: 180px;
}
.menu > li {
	line-height: 30px;
	padding: 0 10px;
}
.menu > li.divider {
	border-top: 1px solid #D4D4D4;
	margin: 0 5px;
	padding: 0;
}
.menu > li > a {
	display: block;
	margin: 0 -10px;
	padding: 0 10px;
	text-decoration: none;
}

.menu.dropdown {
	display: none;
	position: absolute;
}
.menu.dropdown.open {
	display: block;
}

/* Author */
.author {
	color: #2841A4;
	display: block;
	font-size: 14px;
	padding: 5px 0;
	text-decoration: none;
}
.author:after {
	clear: both;
	content: '';
	display: block;
}
.author time {
	color: #9B9B9B;
	display: block;
	font-size: 12px;
	white-space: nowrap
}
.author img {
	background: #999;
	border-radius: 50%;
	float: left;
	height: 35px;
	margin: -5px 5px -5px 0;
}
.author.following img {
	box-shadow: 0 0 0 3px #79CF19;
}

/* Summary */
.summary {
	font-size: 14px;
	margin: 10px 0;
}
.summary > h1 {
	font-size: 22px;
	font-weight: normal;
	line-height: 1;
	margin: 10px 0;
}
.summary > p {
	color: #9B9B9B;
	margin: 10px 0;
}
.summary > p > strong {
	color: #000;
	font-weight: normal;
}

.summary.brief {
	font-size: 13px;
}
.summary.brief > h1 {
	font-size: 15px;
	margin: 5px 0;
}
.summary.brief > p {
	margin: 5px 0;
}

.summary.brief > :first-child {
	margin-top: 0;
}
.summary.brief > :last-child {
	margin-bottom: 0;
}

/* Event */
.event {
	color: inherit;
	display: block;
	padding-left: 40px;
	position: relative;
	text-decoration: none;
}
.event.attending:after {
	border-right: 30px solid #79CF19;
	border-bottom: 30px solid transparent;
	content: '';
	display: block;
	position: absolute;
	right: -10px;
	top: -10px;
}
.event .author {
	float: left;
	margin-left: -40px;
	margin-right: 5px;
}
.event .summary {
	margin: 0;
}

/* Search results */
.search-results {
	background: #000;
	border-top: 1px solid #4A4A4A;
	box-shadow: 0 0 10px 5px rgba(0,0,0,0.5);
	color: #fff;
	font-size: 14px;
	padding: 0.01%;
}
.search-results > ol {
	border-top: 1px solid #4A4A4A;
	display: block;
	list-style: none;
	margin: 10px;
	padding: 0;
}
.search-results > ol:first-child {
	border-top: 0;
}
.search-results > ol > li {
	diplay: block;
	margin: 20px 10px;
	padding: 0;
}
.search-results > ol > li > small {
	font-size: 13px;
	opacity: 0.3;
}

/* User action is any action the user does against their account. ie. Follow a person. */
.user-action {
	float: right;
}

/* Layout */
.fill-container {
	display: -webkit-flex;
	width: 100%;
	-webkit-flex-direction: column;
}
.fill-container > .fill {
	-webkit-flex-grow: 1;
}
.fill-container.horizontal {
	-webkit-flex-direction: row;
}

.viewer-layout {
	height: 100%;
	position: relative;
}
.viewer-layout > .viewer-header {
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.viewer-layout > .viewer-main {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 80px;
	z-index: 0;
}

/* Misc */
.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

.clearfix:after {
	clear: both;
	content: '';
	display: block;
}

.box {
	padding: 10px;
}

.hidden {
	display: none;
}

/* Ignore */
body {
	font: 12px/120% Helvetica,Arial,sans-serif;
	margin: 0;
}
html, body {
	height: 100%;
}

dabblet.html

<div class="viewer-layout">
	<header class="viewer-header">
		<nav class="navbar">
			<ul class="pull-left">
				<li><button class="button primary">Submit</button></li>
			</ul>
			<ul class="user-action">
				<li><a href="#">Sign up</a></li>
				<li><a href="#">Sign in</a></li>
			</ul>
			<a href="#" class="brand">App name</a>
		</nav>
		<nav class="master-bar">
			<form class="master-title fancy-textfield">
				<input type="text" class="fancy-textfield-input">
				<div class="fancy-textfield-placeholder">
					Something
					<small>Awesome</small>
				</div>
			</form>
			<div class="user-action">
				<button class="button">Follow</button>
			</div>
		</nav>
		<div class="search-results hidden">
			<ol>
				<li>Search result <small>secondary information</small></li>
				<li>Another result <small>with more information</small></li>
			</ol>
			<ol>
				<li>Secondary results</li>
			</ol>
		</div>
	</header>
	<div class="main viewer-main fill-container horizontal">
		<div class="draws">
			<div class="draw">
				<figure class="portrait">
					<img src="about:blank">
				</figure>
				<ul class="stats draw-fill">
					<li class="stat">
						<a href="#"><strong>5</strong> something</a>
					</li>
					<li class="stat">
						<a href="#"><strong>10</strong> something else</a>
					</li>
				</ul>
				<ul class="navlist">
					<li><a href="#">Something</a></li>
					<li>Another thing</li>
					<li><a href="#">Something else</a></li>
				</ul>
			</div>
			<div class="draw">
				<ul class="listgroup draw-fill">
					<li class="title"><h2 class="title">Section heading</h2></li>
					<li>
						<a href="#" class="event brief attending">
							<div class="author following"><img src="about:blank"></div>
							<div class="summary brief">
								<h1>Article title</h1>
								<p>A brief scription</p>
							</div>
						</a>
					</li>
				</ul>
					<ul class="menu">
					<li><a href="#">First item</a></li>
					<li><a href="#">Second item</a></li>
					<li class="divider"></li>
					<li><a href="#">Third item</a></li>
				</ul>
			</div>
		</div>
		<div class="fill">
			<article class="panel">
				<header class="clearfix">
					<a href="#" class="author pull-left">
						<img src="about:blank">
						Author
						<time>5 days ago</time>
					</a>
					<div class="user-action button-group">
						<a href="#" class="button">Attend</a>
						<a href="#" class="button"><span class="caret"></span></a>
					</div>
				</header>
				<div class="summary">
					<h1>Header</h1>
					<p>Some <strong>important</strong> description</p>
					<p>Followed by more information</p>
				</div>
			</article>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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