Window

dabblet.css

/**
 * Window
 */
html,body{
height:100%;
overflow:hidden;
}
body{
font:normal normal 14px/20px "HelveticaNeue", Helvetica Neue, Helvetica sans-serif;
-webkit-font-smoothing:antialiased;
text-shadow:0 0 1px rgba(0,0,0,0.01);
-webkit-text-stroke:1px transparent;
text-rendering:optimizeLegibility;
color:#333;
background:url('http://i.minus.com/ijmxXfbi5OXtk.png');
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:cover;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:cover;
}
/* CONTAINERS & COLUMNS */
.col-1,.col-2, .col-3, .col-4{
float:left;
display:inline;
position:relative;
}
/* Title Columns */
.title .col-1{
width:390px;
}
.title .col-2{
width:390px;
}
.omega{
margin-right:0;
}
.content{
cursor:text;
}
/* Labels */
.content h1{
position:absolute;
height:18px;
line-height:18px;
z-index:100;
color:#aaa;
background:rgba(255,255,255,0.7);
font-weight:normal;
display:inline-block;
top:10px;
right:10px;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
padding:0 4px;
margin:0 0 10px 10px;
border:1px solid #aaa;
font-size:10px;
visibility:visible;
opacity:1;
-webkit-transition:.2s;
   -moz-transition:.2s;
     -o-transition:.2s;
        transition:.2s;
}
.content .col-1:hover h1,
.content .col-2:hover h1,
.content .col-3:hover h1,
.content .col-4:hover h1{
visibility:hidden;
opacity:0;
}
.content h1:hover{
opacity:0;
}
.content .col-1,
.content .col-2,
.content .col-3,
.content .col-4{
padding:10px;
overflow-y:auto;
}
.content .html.col-1{
width:379px;
height:211px;
border-bottom:solid 1px #ccc;
border-right:solid 1px #ccc;
padding:10px 10px 10px 10px;
margin-left:1px;
}
.content .css.col-2{
width:378px;
height:211px;
margin-right:1px;
border-bottom:solid 1px #ccc;
}
.content .js.col-3{
width:379px;
height:211px;
border-right:solid 1px #ccc;
padding:10px 10px 10px 10px;
margin-left:1px;
-webkit-border-radius:0 0 0 4px;
   -moz-border-radius:0 0 0 4px;
        border-radius:0 0 0 4px;
}
.content .result.col-4{
width:378px;
height:211px;
margin-right:1px;
-webkit-border-radius:0 0 4px 0;
   -moz-border-radius:0 0 4px 0;
        border-radius:0 0 4px 0;
}
/* WINDOW */
.window{
width:800px;
height:500px;
-webkit-border-radius:6px;
   -moz-border-radius:6px;
        border-radius:6px;
-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.7), 0px 1px 1px 1px rgba(0, 0, 0, 0.125), 0px 5px 10px 1px rgba(0, 0, 0, 0.125);
   -moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.7), 0px 1px 1px 1px rgba(0, 0, 0, 0.125), 0px 5px 10px 1px rgba(0, 0, 0, 0.125);
        box-shadow:inset 0 0 0 1px rgba(0,0,0,0.7), 0px 1px 1px 1px rgba(0, 0, 0, 0.125), 0px 5px 10px 1px rgba(0, 0, 0, 0.125);
background-image:-webkit-linear-gradient(#fefefe,#F2F3F4);
background-image:-moz-linear-gradient(#fefefe,#F2F3F4);
background-image:-o-linear-gradient(#fefefe,#F2F3F4);
background-image:-ms-linear-gradient(#fefefe,#F2F3F4);
background-image:linear-gradient(#fefefe,#F2F3F4);
display:block;
position:absolute;
top:50%;
left:50%;
margin:-250px 0 0 -400px;
-webkit-background-clip:padding-box;
   -moz-background-clip:/*@@prefixmycss->No equivalent*/;
        background-clip:padding-box;
}
/* TITLE */
.title{
height:20px;
background-color:#6B82A5;
background-image:-webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:-moz-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:-o-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:-ms-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
-webkit-border-radius:6px 6px 0 0;
   -moz-border-radius:6px 6px 0 0;
        border-radius:6px 6px 0 0;
padding:8px 10px;
-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
   -moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
        box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
}
ul{
padding:0;
margin:0;
list-style:none;
}
li{
float:left;
margin-right:5px;
}
li.omega{
margin-right:0;
}
li.right{
float:right;
}
li a.button{
font-size:10px;
}
/* DROPDOWN */

ul.menu{
display:none;
}
li.wrapper:active ul.menu{
display:block;
}
ul.menu:hover{
display:block;
}
li.wrapper{
position:relative;
}
ul.menu{
position:absolute;
width:75px;
z-index:100;
top:0px;
padding-top:38px;
}
ul.menu li{
padding:4px 8px;
background:#222;
width:59px;
font-weight:bold;
font-size:10px;
line-height:13px;
-webkit-box-shadow:inset 0 1px 0 0 #111, 	inset 0px 2px 0px 0px rgba(255,255,255,0.125), 	0px 1px 0px 0px #111,	inset 1px 0px 0px 0px #111,	inset -1px 0px 0px 0px #111,	inset 2px 0px 0px 0px rgba(255,255,255,0.125),	inset -2px 0px 0px 0px rgba(255,255,255,0.125);
   -moz-box-shadow:inset 0 1px 0 0 #111, 	inset 0px 2px 0px 0px rgba(255,255,255,0.125), 	0px 1px 0px 0px #111,	inset 1px 0px 0px 0px #111,	inset -1px 0px 0px 0px #111,	inset 2px 0px 0px 0px rgba(255,255,255,0.125),	inset -2px 0px 0px 0px rgba(255,255,255,0.125);
        box-shadow:inset 0 1px 0 0 #111, 	inset 0px 2px 0px 0px rgba(255,255,255,0.125), 	0px 1px 0px 0px #111,	inset 1px 0px 0px 0px #111,	inset -1px 0px 0px 0px #111,	inset 2px 0px 0px 0px rgba(255,255,255,0.125),	inset -2px 0px 0px 0px rgba(255,255,255,0.125);
-webkit-transition:.2s;
   -moz-transition:.2s;
     -o-transition:.2s;
        transition:.2s;
cursor:pointer;
}
ul.menu li:hover{
background:#333;
}
ul.menu li:active{
background:#111;
}
ul.menu li a:link,ul.menu li a:visited{
color:white;
text-shadow:0 1px 0 rgba(0,0,0,0.25);
}
li.first{
-webkit-border-radius:4px 4px 0 0;
   -moz-border-radius:4px 4px 0 0;
        border-radius:4px 4px 0 0;
}
li.last{
-webkit-border-radius:0 0 4px 4px;
   -moz-border-radius:0 0 4px 4px;
        border-radius:0 0 4px 4px;
}
/* CODE COLOURS */

span.pun{
color:#666;
}
span.val{
color:#770088;
}
span.ide{
color:black;
}
span.com{
color:#A70;
}
/* DEMO STYLES */

.foobar{
color:#f00842;
}
.robots{
color:#208075;
}
p{
margin:0 0 15px 0;
font-size:12px;
line-height:15px;
}
pre{
color:#606161;
overflow:hidden;
height:144px;
font-size:12px;
line-height:15px;
margin:0;
padding:10px;
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
_font-family:"Courier New",monospace;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}
/* BUTTONS */

a.button{
font-size:13px;
line-height:20px;
}
a.close:link,a.close:visited{
color:white;
text-shadow:0 1px rgba(0,0,0,0.5);
font-weight:bold;
font-size:14px;
background:rgba(0,0,0,0.25);
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
height:18px;
width:18px;
float:right;
line-height:16px;
margin-top:1px;
text-align:center;
-webkit-box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.25);
   -moz-box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.25);
        box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.25);
}
a.close:hover{
background:rgba(0,0,0,0.18);
}
a.close:active{
background:rgba(0,0,0,0.3);
}
a.button:link,
a.close:link{
text-shadow:0 1px 0 rgba(0,0,0,0.5);
font-weight:bold;
-webkit-transition:.2s;
   -moz-transition:.2s;
     -o-transition:.2s;
        transition:.2s;
}
a,a.button:link,a.button:visited,a.button:hover,a.button:active{
text-decoration:none;
outline:none;
color:white;
}
a.button{
padding:5px 8px;
width:44px;
-webkit-border-radius:4px;
   -moz-border-radius:4px;
        border-radius:4px;
text-align:center;
display:inline;
}
a.button:link,a.button:visited{
color:#fff;
-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
   -moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
        box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
background-color:#6B82A5;
background-image:-webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:-moz-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:-o-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:-ms-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image:linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
}
a.button:hover{
background-color:#7990B4;
}
a.button:active{
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
background-color:#536785;
-webkit-box-shadow:inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),0 1px 0px 0px rgba(255, 255, 255, 0.3);
   -moz-box-shadow:inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),0 1px 0px 0px rgba(255, 255, 255, 0.3);
        box-shadow:inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),0 1px 0px 0px rgba(255, 255, 255, 0.3);
background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image:-moz-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image:-o-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image:-ms-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image:linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
-webkit-transition:none;
   -moz-transition:none;
     -o-transition:none;
        transition:none;
}
a.cloud:link, a.cloud:visited{
display:block;
font-size:0.5em;
float:left;
margin:8px 0 0 0;
background-color:#FCFDFD;
width:3em;
height:1em;
-webkit-border-radius:3em;
   -moz-border-radius:3em;
        border-radius:3em;
position:relative;
-webkit-box-shadow:0 1px 0 rgba(0,0,0,.5);
   -moz-box-shadow:0 1px 0 rgba(0,0,0,.5);
        box-shadow:0 1px 0 rgba(0,0,0,.5);
}
a.cloud:before, a.cloud:after{
content:'';
position:absolute;
background-color:inherit;
width:0.875em;
height:0.875em;
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
top:-0.4em;
left:0.4375em;
}
a.cloud:after{
width:1.4375em;
height:1.4375em;
left:auto;
right:0.4375em;
top:-0.625em;
}
a.cloud:hover{
background:#fff;
}
a.cloud:active{
background:#F7F7F9;
}
/* BG NOISE */
html:after{
background-image:-webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image:-moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image:-o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image:-ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image:linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
-webkit-background-size:2px 2px;
   -moz-background-size:2px 2px;
     -o-background-size:2px 2px;
        background-size:2px 2px;
background-position:0 0, 1px 1px;
display:block;
content:"";
}

dabblet.html

<body class="noise">
<div class="window">
    <div class="title">
    <div class="col-1">
   		<a href="#" class="cloud" alt="Code Cloud Logo"></a>
    </div>
    
    
<div class="col-2">

        <ul>
	        <li><a href="#" class="button" alt="Run">Run</a></li>
	       	<li><a href="#" class="button" alt="Update">Update</a></li>
	       	<li><a href="#" class="button" alt="Fork">Fork</a></li>
	        <li><a href="#" class="button" alt="Reset">Reset</a></li>
	        <li><a href="#" class="button" alt="Base">Base</a></li>
	        <li><a href="#" class="button" alt="Tidy">Tidy</a></li>
	        
<li class="wrapper">
<a href="#" class="button" alt="User">louisbullock ▾</a>
<ul class="menu">
<li class="first"><a href="#" alt="Dashboard">Dashboard</a></li>
<li><a href="#" alt="Public Fiddles">Public Fiddles</a></li>
<li><a href="#" alt="Change Password">Change Password</a></li>
<li class="last"><a href="#" alt="Logout">Logout</a></li>
</ul>
</li>

        	<li class="omega right"><a href="#" class="close" alt="Close">×</a></li>
        </ul>
        
 </div>
        
        
        
    </div>

    <div class="content">
    <div class="html col-1">
	<h1>HTML</h1>
	<pre>
&lt;p class="foobar"&gt;Foobar is a placeholder name.&lt;/p&gt;

&lt;p class="robots"&gt;Teal is the all-time favourite color of robots.&lt;/p&gt;
</pre>	
	</div>
   
    <div class="css col-2">
    <h1>CSS</h1>
    <pre>
<span class="com">/* TEXT COLORS */</span>

<span class="ide">.foobar</span> <span class="pun">{</span>
    <span class="ide">color</span><span class="pun">:</span><span class="val">#f00842</span>;
<span class="pun">}</span>

<span class="ide">.robots</span> <span class="pun">{</span>
    <span class="ide">color</span><span class="pun">:</span><span class="val">#208075</span><span class="pun">;</span>
<span class="pun">}</span>
</pre>

</div>

<div class="js col-3">
<h1>JavaScript</h1>
<pre>
<span class="com">// Made with ♥ by Louis Bullock
// http://louisbullock.com.au</span>
</pre>
</div>

<div class="result col-4">
<h1>Result</h1>
    <p class="foobar">Foobar is a placeholder name.</p>
	<p class="robots">Teal is the all-time favourite color of robots.</p>
</div>

</div>
</div>
​</body>

settings.json

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