Skip to content

Instantly share code, notes, and snippets.

@xdhmoore

xdhmoore/Credera-Logo-in-CSS-HTML.markdown

Created March 4, 2014 22:19
Show Gist options
  • Save xdhmoore/9356990 to your computer and use it in GitHub Desktop.
Save xdhmoore/9356990 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Daniel Moore.
Raw
index.html
<html>
<body>
<div class="cube">
<div class="top side">
<div class="a quarter"></div>
<div class="b quarter"></div>
<div class="c quarter"></div>
<div class="d quarter"></div>
</div>
<div class="left side">
<div class="a quarter"></div>
<div class="b quarter"></div>
<div class="c quarter"></div>
<div class="d quarter"></div>
</div>
<div class="front side">
<div class="a quarter"></div>
<div class="b quarter"></div>
<div class="c quarter"></div>
<div class="d quarter"></div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
Raw
style.css
.cube {
width: 200px;
height: 200px;
position: relative;
}
.side {
width: 50%;
height: 50%;
}
.quarter {
background-color:#6A6764;
width: 48%;
height: 48%;
display: block;
float: left;
border-top: 2px solid white;
border-left: 2px solid white;
}
.top {
right: 0;
position:absolute;
transform: matrix(1, 0, .4, .4 ,0, 0);
-webkit-transform: matrix(1, 0, .4, .4 ,0, 0);
transform-origin: bottom left;
-webkit-transform-origin: bottom left;
}
.left {
transform: matrix(.4, .4, 0, 1 ,60, -39);
-webkit-transform: matrix(.4, .4, 0, 1 ,60, -39);
transform-origin: bottom left;
-webkit-transform-origin: bottom left;
}
.left .a,
.left .b {
border-top: none;
}
.front {
right: 0;
}
.left,
.front {
bottom: 0;
position: absolute;
}
.front .c,
.left .d {
background-color: #EE3A43;
}
.shadow {
position: absolute;
height: 21%;
width: 40%;
bottom: 0;
left: 50%;
margin-left: -80px;
z-index: -1;
background-image: linear-gradient(-90deg, grey, transparent);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment