Skip to content

Instantly share code, notes, and snippets.

@gr2m

gr2m/dabblet.css

Created November 9, 2012 11:42
Show Gist options
  • Save gr2m/4045296 to your computer and use it in GitHub Desktop.
Save gr2m/4045296 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body, html {
padding: 0;
margin: 0;
height: 100%;
font-family: "Impact";
color: rgba(0,0,0,.1)
}
div {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 0 10px rgba(0,0,0,.3);
background: #FFF;
overflow: hidden;
top: 0;
left: 0;
background-attachment:fixed;
}
div {
background-color: #fff;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
background-size:60px 60px;
z-index: 3;
}
div ~ div {
z-index: 2;
background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
background-size:60px 60px;
}
div ~ div ~ div {
z-index: 1;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
linear-gradient(-45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-size:60px 60px;
}
b {
display: block;
position: fixed;
left: 50%;
top: 50%;
font-size: 10em;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
text-align: center;
line-height: 300px;
}
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>
<b>1</b>
</div>
<div>
<b>2</b>
</div>
<div>
<b>3</b>
</div>
</body>
</html>
Raw
settings.json
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment