Skip to content

Instantly share code, notes, and snippets.

@kordero

kordero/A-Pen-by-Lucas-Crisman.markdown

Created November 4, 2013 23:54
Show Gist options
  • Save kordero/7311521 to your computer and use it in GitHub Desktop.
Save kordero/7311521 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Lucas Crisman.
Raw
index.html
<html>
<head>
<title>stamps layout</title>
</head>
<body>
<div id="container">
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
<div class="stamp"></div>
</div>
</body>
</html
Raw
style.css
#container {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
.stamp {
position: absolute;
background-color: white;
opacity: 0.6;
}
.stamp:nth-child(3n+1) {
height: 15%;
width: 5%;
}
.stamp:nth-child(3n+2) {
width: 15%;
height: 15%;
}
.stamp:nth-child(3n+3) {
width: 15%;
height: 5%;
}
.stamp:nth-child(1) {
top: 15%;
left: 0px;
}
.stamp:nth-child(2) {
top: 0px;
left: 0px;
}
.stamp:nth-child(3) {
top: 0px;
left: 15%;
}
.stamp:nth-child(4) {
top: 15%;
right: 0px;
}
.stamp:nth-child(5) {
top: 0px;
right: 0px;
}
.stamp:nth-child(6) {
top: 0px;
right: 15%;
}
.stamp:nth-child(7) {
bottom: 15%;
left: 0px;
}
.stamp:nth-child(8) {
bottom: 0px;
left: 0px;
}
.stamp:nth-child(9) {
bottom: 0px;
left: 15%;
}
.stamp:nth-child(10) {
bottom: 15%;
right: 0px;
}
.stamp:nth-child(11) {
bottom: 0px;
right: 0px;
}
.stamp:nth-child(12) {
bottom: 0px;
right: 15%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment