Skip to content

Instantly share code, notes, and snippets.

@xanido

xanido/dabblet.css

Created August 9, 2013 02:01
Show Gist options
  • Save xanido/6190578 to your computer and use it in GitHub Desktop.
Save xanido/6190578 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
background: #eaeaea;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
input {
color: #777; /* text color */
font-family: "Helvetica Neue";
font-size: 15px;
font-weight: normal;
border: none;
padding: 10px;
position: relative;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #fff; /* layer fill content + color overlay */
box-shadow:
inset 0 1px 4px rgba(0,0,0,.2); /* drop shadow */
box-sizing: border-box;
margin: 0 !important;
}
.input {
box-sizing: border-box;
display: inline-block;
position: relative;
}
input:focus {
-moz-box-shadow: 0 0 5px rgba(0,134,227,.34); /* outer glow */
-webkit-box-shadow: 0 0 5px rgba(0,134,227,.34); /* outer glow */
box-shadow: 0 0 5px rgba(0,134,227,.34); /* outer glow */
outline: none;
}
.input:before {
background: #f00;
}
.input:before {
position: absolute;
display: block;
content: '';
top: -1px;
left: -1px;
width: 100%;
height: 100%;
padding: 1px;
border-radius: 8px;
background: #000;
z-index: -1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: linear-gradient(top, rgba(164,164,164,1) 0%, rgba(204,204,204,1) 100%);
background: linear-gradient(to bottom, rgba(164,164,164,1) 0%, rgba(204,204,204,1) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.61);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="input"><input type="text"/></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment