<h1>Daily CSS Images :: Day 04</br>Tiger</h1>
<div class="tiger">
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="stripe-left one"></div>
<div class="stripe-left two"></div>
<div class="stripe-left three"></div>
<div class="stripe-center one"></div>
<div class="stripe-center two"></div>
<div class="stripe-right one"></div>
<div class="stripe-right two"></div>
<div class="stripe-right three"></div>
<div class="stripe-eraser"></div>
<div class="eye left">
<div class="pupil"></div>
<div class="eye-shine"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
<div class="eye-shine"></div>
</div>
<div class="cheek left"></div>
<div class="cheek right"></div>
<div class="mouth-area">
<div class="mouth"></div>
<div class="lip left">
<div class="lip-end left"></div>
</div>
<div class="lip right">
<div class="lip-end right"></div>
</div>
</div>
<div class="nose"></div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai');
body {
background: #25a9fc;
}
h1 {
font-family: 'Arima Madurai';
text-align: center;
color: white;
}
.tiger {
position: relative;
margin: auto;
width: 600px;
height: 420px;
}
.head {
position: absolute;
top: 20%;
left: 32.5%;
height: 45%;
width: 35%;
background: #ed8314;
border: 2px solid #b53c00;
border-radius: 80% 80% 70% 70%;
}
.ear {
position: absolute;
top: 0;
height: 38%;
width: 38%;
background: #f8a32e;
border: 2px solid #b53c00;
border-radius: 70%;
z-index: -1;
}
.ear::after {
content: "";
position: absolute;
top: 17%;
left: 10%;
height: 60%;
width: 70%;
background: #eb9e9e;
border-radius: 80% 70% 60% 70%;
border: 1.5px solid #b53c00;
}
.ear.left {
left: -18%;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.ear.right {
right: -18%;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.stripe-left {
position: absolute;
border: 23px solid #4f2202;
border-radius: 5% 0 0 5%;
border-color: transparent transparent transparent #4f2202;
}
.stripe-left.one {
top: 18%;
left: 20%;
-webkit-transform: rotate(55deg) scale(2, 0.5);
transform: rotate(55deg) scale(2, 0.5);
}
.stripe-left.two {
top: 27%;
left: 11.5%;
-webkit-transform: rotate(30deg) scale(1.9, 0.45);
transform: rotate(30deg) scale(1.9, 0.45);
}
.stripe-left.three {
top: 38%;
left: 11.8%;
border-radius: 10% 0% 0% 50%;
-webkit-transform: rotate(10deg) scale(2.2, 0.4);
transform: rotate(10deg) scale(2.2, 0.4);
}
.stripe-center {
position: absolute;
width: 10%;
border: 25px solid #4f2202;
border-radius: 25% 20% 10% 5%;
border-color: #4f2202 transparent transparent transparent;
}
.stripe-center.one {
top: 22.5%;
left: 27%;
-webkit-transform: rotate(-10deg) scale(0.4, 2.7);
transform: rotate(-10deg) scale(0.4, 2.7);
}
.stripe-center.two {
top: 20%;
right: 27%;
-webkit-transform: rotate(10deg) scale(0.4, 2.5);
transform: rotate(10deg) scale(0.4, 2.5);
}
.stripe-right {
position: absolute;
border: 23px solid #4f2202;
border-radius: 0 5% 5% 0;
border-color: transparent #4f2202 transparent transparent;
}
.stripe-right.two {
top: 27%;
right: 11.5%;
-webkit-transform: rotate(-30deg) scale(1.9, 0.45);
transform: rotate(-30deg) scale(1.9, 0.45);
}
.stripe-right.three {
top: 38%;
right: 11.8%;
border-radius: 0% 10% 50% 0%;
-webkit-transform: rotate(-10deg) scale(2.2, 0.4);
transform: rotate(-10deg) scale(2.2, 0.4);
}
.stripe-right.one {
top: 18%;
right: 20%;
-webkit-transform: rotate(-55deg) scale(2, 0.5);
transform: rotate(-55deg) scale(2, 0.5);
}
.stripe-eraser {
position: absolute;
top: 27%;
left: 41%;
height: 22%;
width: 18%;
background: #ed8314;
border-radius: 50% 60%;
}
.eye {
position: absolute;
top: 20%;
height: 35%;
width: 20%;
background: #fff;
border-radius: 80% 80% 70% 70%;
border: 1px solid #2a0901;
}
.pupil {
position: absolute;
top: 18%;
left: 13%;
height: 70%;
width: 70%;
background: #fea718;
border: 1px solid #d47700;
border-radius: 80%;
}
.pupil::after {
content: "";
position: absolute;
top: 17.5%;
left: 17.5%;
height: 65%;
width: 65%;
background: #2a0901;
border-radius: 80%;
}
.eye.left {
left: 15%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.eye.right {
right: 15%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.eye-shine {
position: absolute;
top: 35%;
left: 23%;
width: 22%;
height: 17%;
background: #fff;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
}
.cheek {
position: absolute;
top: 50%;
height: 45%;
width: 60%;
background: #fff;
border: 1px solid #969696;
}
.cheek.left {
left: -3%;
border-radius: 50% 60%;
border-right: transparent;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.cheek.right {
right: -3%;
border-radius: 60% 50%;
border-left: transparent;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.mouth-area {
position: absolute;
top: 45%;
left: 25%;
height: 60%;
width: 50%;
background: #fff;
border: 1px solid #969696;
border-color: #969696 transparent #969696;
border-radius: 200% 200% 180% 180%;
}
.lip {
position: absolute;
top: 15%;
height: 40%;
width: 65%;
background: #fff;
border-radius: 50%;
border: 1px solid #969696;
}
.lip.left {
left: -5%;
border-color: transparent transparent #969696;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.lip.right {
right: -5%;
border-color: transparent transparent #969696 #969696;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.lip-end {
position: absolute;
top: 65%;
height: 45%;
width: 30%;
border: 1px solid #969696;
border-radius: 50%;
}
.lip-end.left {
left: 10%;
border-color: transparent transparent transparent #969696;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.lip-end.right {
right: 10%;
border-color: transparent #969696 transparent transparent;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.mouth {
position: absolute;
top: 30%;
left: 20%;
height: 50%;
width: 60%;
background: #520001;
border: 1px solid #969696;
border-radius: 70%;
}
.mouth::before {
content: "";
position: absolute;
top: 59%;
left: 16%;
height: 37%;
width: 65%;
background: #f26565;
border: 1px solid #c84646;
border-radius: 45%;
}
.mouth::after {
content: "";
position: absolute;
top: 64%;
left: 19%;
height: 30%;
width: 45%;
background: #fd7878;
border-radius: 50% 40%;
}
.nose {
position: absolute;
top: 45%;
left: 33.5%;
height: 25%;
width: 30%;
background: #e7504f;
border: 1px solid #a62f42;
border-radius: 100%;
}
.nose::after {
content: "";
position: absolute;
top: 3%;
left: 7%;
height: 65%;
width: 75%;
background: #df6b65;
border-radius: 90%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.