A Pen by Carolyn Cochran on CodePen.
Created
February 15, 2017 01:25
-
-
Save cochrancj/6995e81b80fb9b3177a6b4f3a7430921 to your computer and use it in GitHub Desktop.
#dailycssimages 24 - Iron Man
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Source: https://s-media-cache-ak0.pinimg.com/736x/06/61/f1/0661f151d0f6da84fe1659e4e81a65d2.jpg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
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