Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created May 12, 2012 10:39
Show Gist options
  • Save dziudek/2665760 to your computer and use it in GitHub Desktop.
Save dziudek/2665760 to your computer and use it in GitHub Desktop.
Download ZIP
Image styling - hexagon method 2.
Raw
dabblet.css
/**
* Image styling - hexagon method 2.
*/
#wrap {
box-sizing: border-box;
margin: 0 auto;
overflow: hidden;
padding: 40px 0 0 118px;
}
.img {
border: none;
float:left;
height: 160px;
margin: 0 75px 0 0;
transform: rotateZ(45deg);
width: 160px;
overflow:hidden;
position: relative;
}
.img > div {
background: #faa;
height: 160px;
transform: rotateZ(-45deg);
width: 160px;
}
.img > div:hover {
background: #afa;
}
.img:nth-child(2n+1) {
margin-top: -40px;
margin-left: -118px;
}
.img:nth-child(2n) {
margin-top: 80px;
margin-left: -118px;
}
/* 280px + (230px * N) */
@media all and (max-width: 520px) { #wrap, #wrap-helper { width: 280px; } }
@media all and (min-width: 521px) and (max-width: 760px) { #wrap, #wrap-helper { width: 510px; } }
@media all and (min-width: 761px) and (max-width: 990px) { #wrap, #wrap-helper { width: 750px; } }
@media all and (min-width: 991px) and (max-width: 1230px) { #wrap, #wrap-helper { width: 980px; } }
@media all and (min-width: 1231px) and (max-width: 1460px) { #wrap, #wrap-helper { width: 1220px; } }
@media all and (min-width: 1461px) and (max-width: 1690px) { #wrap, #wrap-helper { width: 1450px; } }
@media all and (min-width: 1691px) and (max-width: 1920px) { #wrap, #wrap-helper { width: 1680px; } }
@media all and (min-width: 1921px) and (max-width: 2150px) { #wrap, #wrap-helper { width: 1910px; } }
@media all and (min-width: 2151px) and (max-width: 2380px) { #wrap, #wrap-helper { width: 2140px; } }
@media all and (min-width: 2381px) { #wrap, #wrap-helper { width: 2370px; } }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="wrap">
<div id="wrap-helper">
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
<div class="img"><div>IMG</div></div>
</div>
</div>
Raw
settings.json
{"view":"split","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