Skip to content

Instantly share code, notes, and snippets.

@louisbullock

louisbullock/dabblet.css

Created July 13, 2012 06:25
Show Gist options
  • Save louisbullock/3103120 to your computer and use it in GitHub Desktop.
Save louisbullock/3103120 to your computer and use it in GitHub Desktop.
Download ZIP
Window
Raw
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: cover;
-moz-background-size: cover;
background-size: cover;
}
/* CONTAINERS & COLUMNS */
.col-1,.col-2 {
float: left;
display: inline;
position:relative;
}
/* Title Columns */
.title .col-1 {
width:288px;
}
.title .col-2 {
width:292px;
}
.omega {
margin-right:0;
}
/* Labels */
.content h1 {
position:absolute;
z-index:100;
color:#aaa;
background:rgba(255,255,255,0.8);
font-weight:normal;
display:inline-block;
top:10px;
right:10px;
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;
-ms-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;
}
.content .html.col-1 {
width: 278px;
height: 142px;
border-right: solid 1px #ccc;
padding: 10px 11px 10px 10px;
margin-left:1px;
background:red;
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
.content .css.col-2 {
width: 279px;
height: 163px;
background:blue;
}
/* WINDOW */
.window {
width: 600px;
height: 370px;
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);
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-left: -160px;
margin-top: -100px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
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));
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 a.button {
font-size: 10px;
}
/* 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;
}
.title a.close {
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.button:link {
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
font-weight: bold;
}
a,a.button:link,a.button:visited,a.button:hover,a.button:active {
text-decoration: none;
outline: none;
}
a.button {
padding: 5px 8px;
width: 44px;
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);
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));
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
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);
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;
-ms-transition: none;
transition: none;
}
a.cloud {
display:block;
font-size: 0.5em;
float: left;
margin: 8px 0 0 2px;
background-color: #fff;
width: 3em;
height: 1em;
border-radius: 3em;
position: relative;
-webkit-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;
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;
}
/* 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;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
display: block;
content: "";
}
Raw
dabblet.html
<body class="noise">
<div class="window">
<div class="title">
<div class="col-1">
<a 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="omega"><a href="#" class="close" alt="Close">×</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="html col-1">
<h1>HTML</h1>
<p class="foobar">Foobar is a placeholder name (also referred to as a metasyntactic variable).</p>
<p class="robots">Teal is the all-time favourite color of robots.</p>
</div>
<div class="css col-2">
<h1>Result</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>
</div>
​</body>
Raw
settings.json
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment