Skip to content

Instantly share code, notes, and snippets.

@cochrancj
Created February 15, 2017 01:25
Show Gist options
  • Save cochrancj/6995e81b80fb9b3177a6b4f3a7430921 to your computer and use it in GitHub Desktop.
Save cochrancj/6995e81b80fb9b3177a6b4f3a7430921 to your computer and use it in GitHub Desktop.
#dailycssimages 24 - Iron Man
<div class="container">
<div class="iron-man">
<div class="head-border"></div>
<div class="head"></div>
<div class="helmet">
<div class="helmet-top"></div>
<div class="helmet-center"></div>
<div class="helmet-bottom"></div>
</div>
<div class="left-gold"></div>
<div class="right-gold"></div>
<div class="face"></div>
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="nose"></div>
<div class="mouth">
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
</div>
<div class="body"></div>
<div class="body-outline"></div>
<div class="left-arm"></div>
<div class="right-arm"></div>
<div class="arc"></div>
<div class="arc-inner"></div>
<div class="codpiece">
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
</div>
<div class="codpiece-color">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</div>
// Source: https://s-media-cache-ak0.pinimg.com/736x/06/61/f1/0661f151d0f6da84fe1659e4e81a65d2.jpg
* {
box-sizing: border-box;
}
body {
background-color: gainsboro;
}
.container {
width: 40em;
height: 40em;
margin: 5em auto;
}
.iron-man {
position: absolute;
}
.head {
width: 12em;
height: 12em;
background-color: #E13D34;
border-top-left-radius: 2.5em;
border-top-right-radius: 2.5em;
border-bottom-left-radius: 5em;
border-bottom-right-radius: 5em;
position: absolute;
left: 15em;
top: 2em;
}
.head-border {
width: 13em;
height: 12.3em;
border: 0.6em solid #3A302C;
border-top-left-radius: 2.5em;
border-top-right-radius: 2.5em;
border-bottom-left-radius: 5em;
border-bottom-right-radius: 5em;
position: absolute;
left: 14.5em;
top: 2em;
z-index: 6;
}
.helmet {
position: relative;
margin-left: 18.5em;
top: 2.5em;
background-color: #3A302C;
width: 5.2em;
height: 5em;
}
.helmet-top {
position: absolute;
border-top: 0.7em solid #E13D34;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
height: 0;
width: 4em;
top: 0;
left: 0.6em;
}
.helmet-center {
position: absolute;
border-top: 0.8em solid #E13D34;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
height: 0;
width: 3em;
top: 1em;
left: 1.1em;
}
.helmet-bottom {
position: absolute;
border-top: 1em solid #E13D34;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
height: 0;
width: 2.2em;
top: 2em;
left: 1.5em;
}
.face {
width: 7em;
height: 7em;
background: #F3E985;
position: relative;
top: 2em;
left: 17.5em;
transform: rotate(90deg);
}
.face:before {
content: "";
position: absolute;
top: -2.5em;
left: 0;
height: 0;
width: 0;
border-left: 3.5em solid transparent;
border-right: 3.5em solid transparent;
border-bottom: 2.6em solid #F3E985;
}
.face:after {
content: "";
position: absolute;
bottom: -40px;
left: 0;
width: 0;
height: 0;
border-left: 3.5em solid transparent;
border-right: 3.5em solid transparent;
border-top: 2.5em solid #F3E985;
}
.left-gold {
width: 3.4em;
height: 5em;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
background: #F3E985;
position: absolute;
left: 16.4em;
top: 2.5em;
}
.right-gold {
width: 3.4em;
height: 5em;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
background: #F3E985;
position: absolute;
left: 22.4em;
top: 2.5em;
}
.left-eye {
border: 0.2em solid #3A302C;
position: absolute;
width: 2em;
height: 0.6em;
border-radius: 5em;
background-color: snow;
transform: rotate(20deg);
left: 17em;
top: 10em;
}
.right-eye {
border: 0.2em solid #3A302C;
position: absolute;
width: 2em;
height: 0.6em;
border-radius: 5em;
background-color: snow;
transform: rotate(-20deg);
left: 23em;
top: 10em;
}
.nose {
border: 2px solid #3A302C;
position: absolute;
width: 4.2em;
left: 18.9em;
top: 10.4em;
}
.mouth {
position: relative;
left: 17.6em;
top: 0.8em;
}
.mouth > .left {
position: absolute;
width: 1.5em;
border: 0.2em solid #3A302C;
transform: rotate(-40deg);
}
.mouth > .top {
position: absolute;
width: 4.3em;
border: 0.2em solid #3A302C;
left: 1.2em;
top: -0.4em;
}
.mouth > .right {
position: absolute;
width: 1.5em;
border: 0.2em solid #3A302C;
transform: rotate(40deg);
left: 5.2em;
top: 0.1em;
}
.body {
width: 8em;
height: 7em;
background-color: #E13D34;
position: absolute;
top: 10em;
border: 0.5em solid #3A302C;
border-radius: 3em;
left: 17em;
top: 14em;
}
.body-outline {
width: 8em;
height: 7em;
position: absolute;
top: 10em;
border: 0.5em solid #3A302C;
border-radius: 3em;
left: 17em;
top: 14em;
z-index: 20;
}
.arc {
width: 2em;
height: 2em;
border-radius: 50%;
background-color: snow;
position: absolute;
top: 16.5em;
left: 20em;
border: 0.4em solid #3A302C;
z-index: 10;
}
.arc-inner {
width: 1em;
height: 1em;
border-radius: 50%;
background-color: snow;
position: absolute;
top: 17em;
left: 20.5em;
border: 0.2em solid #AEDDF0;
z-index: 12;
}
.codpiece {
position: relative;
left: 17.6em;
top: 7.5em;
z-index: 12;
}
.codpiece > .left {
position: absolute;
width: 1.5em;
border: 0.2em solid #3A302C;
transform: rotate(-40deg);
left: 1em;
top: 0.1em;
}
.codpiece > .top {
position: absolute;
width: 2.5em;
border: 0.2em solid #3A302C;
left: 2.2em;
top: -0.4em;
z-index: 12;
}
.codpiece > .right {
position: absolute;
width: 1.5em;
border: 0.2em solid #3A302C;
transform: rotate(40deg);
left: 4.4em;
top: 0.1em;
}
.codpiece-color {
position: relative;
left: 17.6em;
top: 7.5em;
}
.codpiece-color > .left {
width: 0;
height: 0;
border-top: 0.6em solid transparent;
border-left: 0.9em solid #F3E985;
border-bottom: 0.6em solid transparent;
position: absolute;
transform: rotate(50deg);
left: 1.7em;
top: 0.1em;
}
.codpiece-color > .middle {
width: 2.3em;
height: 1em;
background-color: #F3E985;
position: absolute;
left: 2.2em;
}
.codpiece-color > .right {
width: 0;
height: 0;
border-top: 0.7em solid transparent;
border-left: 1em solid #F3E985;
border-bottom: 0.7em solid transparent;
position: absolute;
transform: rotate(128deg);
left: 4.1em;
top: 0em;
}
.left-arm {
width: 3.5em;
height: 3.5em;
border-radius: 50%;
background-color: #E13D34;
position: absolute;
top: 15em;
left: 15.5em;
border: 0.5em solid #3A302C;
z-index: 25;
}
.right-arm {
width: 3.5em;
height: 3.5em;
border-radius: 50%;
background-color: #E13D34;
position: absolute;
top: 15em;
left: 23em;
border: 0.5em solid #3A302C;
z-index: 25;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment