A Pen by Carolyn Cochran on CodePen.
Created
February 14, 2017 01:03
-
-
Save cochrancj/af3a69e3b65ed2be3805abad3906b867 to your computer and use it in GitHub Desktop.
#dailycssimages 23 - Wolverine
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="wolverine"> | |
<div class="head"></div> | |
<div class="hood"></div> | |
<div class="left-wing"></div> | |
<div class="right-wing"></div> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
<div class="face"></div> | |
<div class="mouth"></div> | |
<div class="top-teeth"></div> | |
<div class="top-left-fang"></div> | |
<div class="top-right-fang"></div> | |
<div class="bottom-teeth"></div> | |
<div class="body"></div> | |
<div class="left-hand"></div> | |
<div class="right-hand"></div> | |
<div class="left-claws"> | |
<div class="claw"></div> | |
<div class="claw"></div> | |
<div class="claw"></div> | |
</div> | |
<div class="right-claws"> | |
<div class="claw"></div> | |
<div class="claw"></div> | |
<div class="claw"></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: http://designyoutrust.com/wp-content/uploads/2013/09/cartoon-11.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: 30em; | |
height: 30em; | |
margin: 5em auto; | |
/* border: 1px solid yellow; */ | |
position: relative; | |
} | |
.head { | |
width: 10em; | |
height: 9.5em; | |
border: 0.5em solid #3B3130; | |
position: absolute; | |
border-radius: 2em; | |
margin-left: 9em; | |
margin-top: 7em; | |
z-index: 2; | |
} | |
.hood { | |
width: 0; | |
height: 0; | |
border-left: 4.3em solid transparent; | |
border-right: 4.3em solid transparent; | |
border-top: 6em solid #F3F363; | |
margin-left: 10em; | |
margin-top: 7.5em; | |
position: absolute; | |
} | |
.left-wing { | |
width: 0; | |
height: 0; | |
border-bottom: 7em solid #4B9BE6; | |
border-right: 5.5em solid transparent; | |
position: absolute; | |
margin-left: 9em; | |
margin-top: 6.4em; | |
z-index: 2; | |
} | |
.right-wing { | |
width: 0; | |
height: 0; | |
border-bottom: 7em solid #4B9BE6; | |
border-left: 5.5em solid transparent; | |
position: absolute; | |
margin-left: 13.5em; | |
margin-top: 6.4em; | |
z-index: 2; | |
} | |
.left-eye { | |
position: absolute; | |
margin-top: 11.5em; | |
margin-left: 9.8em; | |
width: 2em; | |
height: 1em; | |
background-color: snow; | |
border-top-left-radius: 100em; | |
border-top-right-radius: 100em; | |
border-bottom: 0; | |
transform: rotate(-130deg); | |
z-index: 4; | |
} | |
.right-eye { | |
position: absolute; | |
margin-top: 11.5em; | |
margin-left: 15.8em; | |
width: 2em; | |
height: 1em; | |
background-color: snow; | |
border-top-left-radius: 100em; | |
border-top-right-radius: 100em; | |
border-bottom: 0; | |
transform: rotate(130deg); | |
z-index: 4; | |
} | |
.mouth { | |
width: 3em; | |
height: 1em; | |
position: absolute; | |
background-color: #3B3130; | |
border-radius: 2em; | |
margin-left: 12.5em; | |
margin-top: 14em; | |
} | |
.top-teeth { | |
width: 2em; | |
height: 0.2em; | |
position: absolute; | |
background-color: white; | |
margin-left: 13em; | |
margin-top: 14em; | |
} | |
.top-left-fang { | |
width: 0; | |
height: 0; | |
border-left: 0.2em solid transparent; | |
border-right: 0.2em solid transparent; | |
border-top: 0.4em solid white; | |
position: absolute; | |
margin-left: 12.8em; | |
margin-top: 14em; | |
} | |
.top-right-fang { | |
width: 0; | |
height: 0; | |
border-left: 0.2em solid transparent; | |
border-right: 0.2em solid transparent; | |
border-top: 0.4em solid white; | |
position: absolute; | |
margin-left: 14.8em; | |
margin-top: 14em; | |
} | |
.bottom-teeth { | |
width: 2em; | |
height: 0.2em; | |
position: absolute; | |
background-color: white; | |
margin-left: 13em; | |
margin-top: 14.8em; | |
} | |
.body { | |
width: 7em; | |
height: 6em; | |
border: 0.5em solid #3B3130; | |
position: absolute; | |
border-radius: 2em; | |
margin-left: 10.5em; | |
margin-top: 16.5em; | |
background-color: #F3F363; | |
} | |
.left-hand { | |
width: 3em; | |
height: 3em; | |
border: 0.5em solid #3B3130; | |
background-color: #4B9BE6; | |
position: absolute; | |
border-radius: 2em; | |
margin-left: 12em; | |
margin-top: 18.5em; | |
} | |
.right-hand { | |
width: 3em; | |
height: 3em; | |
border: 0.5em solid #3B3130; | |
background-color: #4B9BE6; | |
position: absolute; | |
border-radius: 2em; | |
margin-left: 13.5em; | |
margin-top: 18.2em; | |
z-index: 3; | |
} | |
.left-claws { | |
} | |
.claw { | |
position: absolute; | |
width: 1em; | |
height: 6em; | |
border: 0.3em solid #3B3130; | |
border-radius: 5em; | |
background-color: darkgrey; | |
z-index: 6; | |
} | |
.left-claws > .claw:nth-child(1) { | |
margin-left: 11.2em; | |
margin-top: 13.4em; | |
transform: rotate(-30deg); | |
} | |
.left-claws > .claw:nth-child(2) { | |
margin-left: 10.3em; | |
margin-top: 14.2em; | |
transform: rotate(-35deg); | |
} | |
.left-claws > .claw:nth-child(3) { | |
margin-left: 10em; | |
margin-top: 15.6em; | |
transform: rotate(-40deg); | |
} | |
.right-claws > .claw:nth-child(1) { | |
margin-left: 16.2em; | |
margin-top: 13.1em; | |
transform: rotate(30deg); | |
} | |
.right-claws > .claw:nth-child(2) { | |
margin-left: 17em; | |
margin-top: 13.8em; | |
transform: rotate(35deg); | |
} | |
.right-claws > .claw:nth-child(3) { | |
margin-left: 17.6em; | |
margin-top: 14.9em; | |
transform: rotate(40deg); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment