Skip to content

Instantly share code, notes, and snippets.

@cedricici

cedricici/dabblet.css

Created March 27, 2012 13:20
Show Gist options
  • Save cedricici/2215808 to your computer and use it in GitHub Desktop.
Save cedricici/2215808 to your computer and use it in GitHub Desktop.
Download ZIP
iso_cube
Raw
dabblet.css
/**
* iso_cube
*/
body{
background:orangered;
}
#cube {
position: absolute;
top: 90px;
left: 360px;
}
.face {
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
font-family: monospace;
font-size: 24px;
}
.top {
top: 0;
left: 89px;
background: #eee;
color: #999;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-o-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
top: 155px;
left: 0;
background: #999;
color: #333;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
-o-transform: rotate(15deg) skew(15deg, 15deg);
-ms-transform: rotate(15deg) skew(15deg, 15deg);
transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
top: 155px;
left: 178px;
background: #ccc;
color: #666;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
-o-transform: rotate(-15deg) skew(-15deg, -15deg);
-ms-transform: rotate(-15deg) skew(-15deg, -15deg);
transform: rotate(-15deg) skew(-15deg, -15deg);
}
.shadow {
top: 310px;
left: -89px;
background: black;
opacity: 0.5;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-o-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="cube">
<div class="face top"></div>
<div class="face left"> </div>
<div class="face right"></div>
<div class="face shadow"></div>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment