Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created May 12, 2012 07:28
Show Gist options
  • Save dziudek/2664965 to your computer and use it in GitHub Desktop.
Save dziudek/2664965 to your computer and use it in GitHub Desktop.
Download ZIP
Image styling - octagon method 1.
Raw
dabblet.css
/**
* Image styling - octagon method 1.
*/
.row {
display: block;
clear: both;
}
.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;
}
.row2 > div {
margin-bottom: -40px;
margin-top: -40px;
}
.row2 > div:first-child {
margin-left: 118px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="row row1">
<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 class="row row2">
<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 class="row row1">
<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>
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