Skip to content

Instantly share code, notes, and snippets.

@yoksel

yoksel/jsbin.aWuviY.css

Created September 29, 2013 11:51
Show Gist options
  • Save yoksel/6751834 to your computer and use it in GitHub Desktop.
Save yoksel/6751834 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.aWuviY.css
BODY {
text-align: center;
color: #999;
text-shadow: 1px 0 1px rgba(0,0,0,.5);
}
DIV {
display: inline-block;
position: relative;
width: 45%;
height: 15em;
overflow: hidden;
margin: 0 2%;
padding: 10px;
box-sizing: border-box;
vertical-align: top;
}
.grid-gradient {
background:
repeating-linear-gradient(
transparent,transparent 20px, yellowgreen 22px
),
repeating-linear-gradient(
90deg,
transparent,transparent 20px, yellowgreen 22px
);
border: 2px solid yellowgreen;
}
.grid-shadow {
border: 2px solid steelblue;
}
.grid-shadow:before,
.grid-shadow:after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -1px;
left: -1px;
}
.grid-shadow:before {
right: 0;
border-top: 1px solid steelblue;
box-shadow: 0 20px 0 steelblue,
0 40px 0 steelblue,
0 60px 0 steelblue,
0 80px 0 steelblue,
0 100px 0 steelblue,
0 120px 0 steelblue,
0 140px 0 steelblue,
0 160px 0 steelblue,
0 180px 0 steelblue,
0 200px 0 steelblue,
0 220px 0 steelblue;
}
.grid-shadow:after {
bottom: 0;
border-left: 1px solid steelblue;
box-shadow: 20px 0 0 steelblue,
40px 0 0 steelblue,
60px 0 0 steelblue,
80px 0 0 steelblue,
100px 0 0 steelblue,
120px 0 0 steelblue,
140px 0 0 steelblue,
160px 0 0 steelblue,
180px 0 0 steelblue,
200px 0 0 steelblue,
220px 0 0 steelblue,
240px 0 0 steelblue,
260px 0 0 steelblue,
280px 0 0 steelblue,
300px 0 0 steelblue,
320px 0 0 steelblue,
340px 0 0 steelblue,
360px 0 0 steelblue,
380px 0 0 steelblue,
400px 0 0 steelblue,
420px 0 0 steelblue,
440px 0 0 steelblue,
460px 0 0 steelblue,
480px 0 0 steelblue;
}
Raw
jsbin.aWuviY.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>Grids</title>
</head>
<body>
<div class="grid-gradient"></div>
<div class="grid-shadow"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment