Untitled

dabblet.css

body{padding:0; margin:0; outline:none; border:none; overflow-x:none; list-style:none; 
}

input[type=text], input[type=password] {width:50%; height:22px; padding:2px 5px; border:1px solid #c3c3c3; border-top-color:#b0b0b0;}
input[type=text]:hover, input[type=password]:hover {border:1px solid #a3a3a3; box-shadow:0px 2px 6px -2px #c3c3c3 inset }
input[type=text]:focus, input[type=password]:focus {border:1px solid #4d90fe; box-shadow:0px 2px 6px -2px #a3aa3 inset; outline:none;}


#links-nav-top {font:13px/26px Arial, sans-serif; background-color:#333; padding:5px;}
#links-nav-top li {display:inline; width:80%;  padding:2px 10px; font-weight:bold; text-transform:capitalize;}
#links-nav-top li a {text-decoration:none; color:#c3c3c3;}
#links-nav-top li a:hover {color:#fff;}

#nav-top {height:40px; padding:2px 15px; border:1px solid #f3f3f3;}
#nav-top .logo {float:left; width:15%; border:1px solid #333; height:90%;}
#nav-top .pesquisa {float:left; width:50%; margin:4px 10px;}
#nav-top .painel-user {float:right; width:30%; border:1px solid #333; height:90%;} 
.btn {width:60px; height:28px; border:1px solid #3079ed; border-radius:3px; background-color:#4d90fe; color:#fff; cursor:pointer; margin:0 10px;}
.btn:hover{background:#3079e0;}

#menu-nav-top {font:13px/27px Arial, sans-serif; background-color:#f3f3f3; font-weight:bold;}
#menu-nav-top li {
color: #737373;
display: inline-block;
line-height: 1.4;
margin: 0 18px;
max-width: 180px;
min-width: 20px;
padding: 13px 0 10px 0;
text-transform:capitalize;
}
#menu-nav-top li a {text-decoration:none; color:#999;
transition: border-color .318s;
border-bottom:2px solid transparent;
padding-bottom:10px;
}
#menu-nav-top li a:hover {color:#333; padding-bottom:10px; 
transition:border-color .318s;
border-bottom:2px solid #3079e0;}



.ativo {color:#333 !important; padding-bottom:10px; border-bottom:2px solid #3079e0 !important;}


#css3-transition {padding:5px; background-color:#333;}
#css3-transition a { color: #333; }

#css3-transition .asterisco { transition: all 0.5s ease; }

#css3-transition a:hover .asterisco { transform: rotate(180deg); }

#css3-transition .texto { transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550); }

#css3-transition a:hover .texto { transform: scale(1.2); }



background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

dabblet.html

<div id="principal">
		<div id="topo">
			</div><!--Div Topo-->
			
		<div id="conteudo">
			<div id="links-nav-top">
					<li><a href="#">+você</a></li>
					<li><a href="#">pesquisar</a></li>
					<li><a href="#">imagens</a></li>
					<li><a href="#">mapas</a></li>
					<li><a href="#">play</a></li>
					<li><a href="#">youtube</a></li>
				</div><!--Div Links-nav-top-->			
								
			<div id="nav-top">
				<div class="logo">
				<img src="" title="" alt=""  />
				</div>
				<div class="pesquisa">
				<input type="text" name="pesquisar"  />
				<input type="submit" name="busca" class="btn" value="Buscar" />
				</div>
				
				<div class="painel-user">
					</div><!--Div painel user-->
				</div><!--Div Nav-top-->
				
				<div id="menu-nav-top">
					<div class="main-menu">
						</div><!--Div main-menu-->
							<div class="sub-menu">
								<li><a href="http://codepen.io" class="ativo">todos</a></li>
								<li><a href="http://createcss3.com">amigos</a></li>
								<li><a href="http://tridiv.com/">família</a></li>
								<li><a href="#">conhecidos</a></li>
								<li><a href="#">seguindos</a></li>
								<li><a href="#">mais</a></li>
							</div><!--Di sub-menu-->
						<div class="api-menu">
							</div><!--Div api-menu-->
						</div><!--Div Menu-nav-top-->
	<div id="css3-transition">
	<a href="#">
    <img class="asterisco" src="http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-01.png" alt="Logo Tableless" />
    <img class="texto" src="http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-02.png" alt="Logo Tableless" />
</a>
	</div><!--Div Css3-transition-->			
			</div><!--Div Conteudo-->
			
		<div id="rodape">
			</div><!--Div Rodape-->


	</div><!--Div Principal-->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}