Skip to content

Instantly share code, notes, and snippets.

@cochrancj
Created January 27, 2017 02:32
Show Gist options
  • Save cochrancj/3f9a4cad576354cdd3ab5a4a34887fa0 to your computer and use it in GitHub Desktop.
Save cochrancj/3f9a4cad576354cdd3ab5a4a34887fa0 to your computer and use it in GitHub Desktop.
#dailycssimages 04 - Tiger
<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>
* {
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