Skip to content

Instantly share code, notes, and snippets.

@pehaa

pehaa/dabblet.css

Created December 19, 2012 15:46
Show Gist options
  • Save pehaa/4337688 to your computer and use it in GitHub Desktop.
Save pehaa/4337688 to your computer and use it in GitHub Desktop.
Download ZIP
220 = 110x2
Raw
dabblet.css
1body {padding-top:100px}
.honey {display:bloc;background:yellow url(http://lorempixel.com/300/300/)
center center;
height:110px; width:190px;margin-right:10px;margin-bottom:65px;
float:left; position:relative}
.clear {clear:left; margin-left:100px;}
.left ,.right {display:block; background:inherit;
width:100%; height:100%; position:absolute;overflow:hidden; left:0; top:0; z-index:-1}
.left {transform:rotate(-60deg); background:inherit }
.right:after,.left:after {content:""; position:absolute;background:inherit;
/* 220 = 110x2 */
width:220px; height:220px; display:block; left:0;top:0;
transform:rotate(-60deg) translate(-110px,0px);
transform-origin:top left}
.left:after {transform:rotate(60deg) translate(-15px,-165px);}
.right {transform:rotate(60deg); background:inherit ; }
.honey:hover {background:orange}
.honey p {color:#FFF; text-align:center; line-height:110px;padding:0;
margin:0; font-size:24px; font-family:arial narrow;
text-transform:uppercase; opacity:0; transition:1s}
.honey:hover p {opacity:1}
.diamond {width:150px; height:150px;
background:url(http://lorempixel.com/204/200/)
center center;
transform:rotate(45deg); position:relative; overflow:hidden}
.diamond:after {content:""; position:absolute; top:-25%; left:-25%; width:150%;
height:150%; background:inherit; transform: rotate(-45deg); opacity:1}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="diamond"></div>
<a href=""class="honey">
<p>This is love</p>
<div class="left"></div>
<div class="right"></div>
</a>
<div class="honey">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="honey">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="honey clear">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="honey">
<div class="left"></div>
<div class="right"></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment