Skip to content

Instantly share code, notes, and snippets.

@cochrancj
Created February 14, 2017 01:03
Show Gist options
  • Save cochrancj/af3a69e3b65ed2be3805abad3906b867 to your computer and use it in GitHub Desktop.
Save cochrancj/af3a69e3b65ed2be3805abad3906b867 to your computer and use it in GitHub Desktop.
#dailycssimages 23 - Wolverine
<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>
// Source: http://designyoutrust.com/wp-content/uploads/2013/09/cartoon-11.jpg
* {
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