A Pen by Carolyn Cochran on CodePen.
Created
January 27, 2017 02:32
-
-
Save cochrancj/3f9a4cad576354cdd3ab5a4a34887fa0 to your computer and use it in GitHub Desktop.
#dailycssimages 04 - Tiger
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="wrapper"> | |
<div class="tiger-container"> | |
<div class="left-ear"></div> | |
<div class="inner-left-ear"></div> | |
<div class="right-ear"></div> | |
<div class="inner-right-ear"></div> | |
<div class="head"></div> | |
<div class="left-eye"></div> | |
<div class="left-iris"></div> | |
<div class="left-pupil"></div> | |
<div class="left-shine"></div> | |
<div class="right-eye"></div> | |
<div class="right-iris"></div> | |
<div class="right-pupil"></div> | |
<div class="right-shine"></div> | |
<div class="nose"></div> | |
<div class="left-muzzle"></div> | |
<div class="left-whiskers"> | |
<div> | |
<div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
<div class="right-muzzle"></div> | |
<div class="right-whiskers"> | |
<div> | |
<div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
<div class="left-fang"></div> | |
<div class="right-fang"></div> | |
<div class="top-stripe-small-left"></div> | |
<div class="top-stripe-large"></div> | |
<div class="top-stripe-small-right"></div> | |
<div class="left-stripe-large"></div> | |
<div class="left-stripe-small"></div> | |
<div class="right-stripe-large"></div> | |
<div class="right-stripe-small"></div> | |
<div class="tail"></div> | |
<div class="tail-stripe-small"></div> | |
<div class="tail-stripe-large"></div> | |
<div class="tail-stripe-small"></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
* { | |
box-sizing: border-box; | |
margin: 0; | |
} | |
.wrapper { | |
background-color: olivedrab; | |
width: 100%; | |
height: 1000px; | |
position: absolute; | |
z-index: -20; | |
} | |
.tiger-container { | |
width: 500px; | |
height: 500px; | |
margin: 0 auto; | |
padding-top: 10%; | |
padding-left: 10%; | |
} | |
.left-ear { | |
width: 100px; | |
height: 100px; | |
border-radius: 100%; | |
background-color: darkorange; | |
position: relative; | |
z-index: -2; | |
} | |
.inner-left-ear { | |
width: 80px; | |
height: 80px; | |
border-radius: 100%; | |
background-color: pink; | |
position: relative; | |
z-index: -1; | |
margin-top: -90px; | |
margin-left: 10px; | |
} | |
.right-ear { | |
width: 100px; | |
height: 100px; | |
border-radius: 100%; | |
background-color: darkorange; | |
position: relative; | |
z-index: -2; | |
margin-top: -90px; | |
margin-left: 200px; | |
} | |
.inner-right-ear { | |
width: 80px; | |
height: 80px; | |
border-radius: 100%; | |
background-color: pink; | |
position: relative; | |
z-index: -1; | |
margin-top: -90px; | |
margin-left: 210px; | |
} | |
.head { | |
width: 300px; | |
height: 300px; | |
border-radius: 100%; | |
background-color: darkorange; | |
position: relative; | |
margin-top: -80px; | |
} | |
.left-eye { | |
width: 80px; | |
height: 75px; | |
border-radius: 90%; | |
background-color: white; | |
position: relative; | |
margin-top: -200px; | |
margin-left: 70px; | |
} | |
.left-iris { | |
width: 25px; | |
height: 70px; | |
border-radius: 100%; | |
background-color: gold; | |
position: relative; | |
margin-left: 97px; | |
margin-top: -70px; | |
} | |
.left-pupil { | |
width: 15px; | |
height: 50px; | |
border-radius: 100%; | |
background-color: black; | |
position: absolute; | |
margin-top: -58px; | |
margin-left: 102px; | |
} | |
.left-shine { | |
width: 0; | |
height: 0; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-bottom: 30px solid white; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
border-radius: 50%; | |
position: absolute; | |
margin-top: -58px; | |
margin-left: 108px; | |
transform: rotate(-140deg); | |
} | |
.right-eye { | |
width: 80px; | |
height: 75px; | |
border-radius: 90%; | |
background-color: white; | |
position: relative; | |
margin-top: -75px; | |
margin-left: 150px; | |
} | |
.right-iris { | |
width: 25px; | |
height: 70px; | |
border-radius: 100%; | |
background-color: gold; | |
position: relative; | |
margin-left: 178px; | |
margin-top: -70px; | |
} | |
.right-pupil { | |
width: 15px; | |
height: 50px; | |
border-radius: 100%; | |
background-color: black; | |
position: absolute; | |
margin-top: -58px; | |
margin-left: 183px; | |
} | |
.right-shine { | |
width: 0; | |
height: 0; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-bottom: 30px solid white; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
border-radius: 50%; | |
position: absolute; | |
margin-top: -58px; | |
margin-left: 190px; | |
transform: rotate(-140deg); | |
} | |
.nose { | |
width: 50px; | |
height: 30px; | |
border-radius: 100%; | |
background-color: palevioletred; | |
position: absolute; | |
z-index: 2; | |
box-shadow: 7px 5px 5px -7px rgba(94,94,94,1); | |
margin-left: 125px; | |
margin-top: -20px; | |
} | |
.left-muzzle { | |
width: 70px; | |
height: 70px; | |
border-radius: 100%; | |
background-color: wheat; | |
position: relative; | |
z-index: 1; | |
margin-left: 80px; | |
margin-top: -10px; | |
} | |
.right-muzzle { | |
width: 70px; | |
height: 70px; | |
border-radius: 100%; | |
background-color: wheat; | |
position: absolute; | |
z-index: 1; | |
margin-left: 150px; | |
margin-top: -70px; | |
} | |
.left-whiskers div { | |
border: 2px solid #000; /* the 'strokes' of the arc */ | |
display: inline-block; | |
min-width: 4em; /* the width of the innermost element */ | |
min-height: 4em; /* the height of the innermost element */ | |
padding: 0.5em; /* the spacing between each arc */ | |
border-radius: 50%; /* for making the elements 'round' */ | |
border-right-color: transparent; /* hide right border */ | |
border-bottom-color: transparent; | |
border-top-color: transparent; | |
} | |
.left-whiskers { | |
margin-left: 50px; | |
margin-top: -50px; | |
position: absolute; | |
z-index: 3; | |
transform: rotate(40deg); | |
} | |
.right-whiskers div { | |
border: 2px solid #000; /* the 'strokes' of the arc */ | |
display: inline-block; | |
min-width: 4em; /* the width of the innermost element */ | |
min-height: 4em; /* the height of the innermost element */ | |
padding: 0.5em; /* the spacing between each arc */ | |
border-radius: 50%; /* for making the elements 'round' */ | |
border-left-color: transparent; /* hide left border */ | |
border-bottom-color: transparent; | |
border-top-color: transparent; | |
} | |
.right-whiskers { | |
margin-left: 140px; | |
margin-top: -50px; | |
position: absolute; | |
z-index: 3; | |
transform: rotate(-40deg); | |
} | |
.left-fang { | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 40px solid white; | |
position: absolute; | |
margin-left: 120px; | |
margin-top: -10px; | |
} | |
.right-fang { | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 40px solid white; | |
position: absolute; | |
margin-left: 170px; | |
margin-top: -10px; | |
} | |
.top-stripe-small-left { | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 40px solid black; | |
border-radius: 5px 0px 0px; | |
position: absolute; | |
margin-left: 120px; | |
margin-top: -235px; | |
} | |
.top-stripe-large { | |
width: 0; | |
height: 0; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-top: 30px solid black; | |
border-radius: 2px 0px 0px; | |
position: absolute; | |
margin-left: 143px; | |
margin-top: -235px; | |
} | |
.top-stripe-small-right { | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 40px solid black; | |
border-radius: 0px 5px 0px; | |
position: absolute; | |
margin-left: 175px; | |
margin-top: -234px; | |
} | |
.left-stripe-large { | |
width: 0; | |
height: 0; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-top: 50px solid black; | |
border-radius: 4px 0px 0px; | |
position: absolute; | |
margin-left: 15px; | |
margin-top: -90px; | |
transform: rotate(-90deg); | |
} | |
.left-stripe-small { | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 40px solid black; | |
border-radius: 0px 2px 0px; | |
position: absolute; | |
margin-left: 20px; | |
margin-top: -70px; | |
transform: rotate(-100deg); | |
} | |
.right-stripe-large { | |
width: 0; | |
height: 0; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-top: 50px solid black; | |
border-radius: 0px 5px 0px; | |
position: absolute; | |
margin-left: 264px; | |
margin-top: -90px; | |
transform: rotate(90deg); | |
} | |
.right-stripe-small { | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 40px solid black; | |
border-radius: 0px 2px 0px; | |
position: absolute; | |
margin-left: 271px; | |
margin-top: -70px; | |
transform: rotate(100deg); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment