Skip to content

Instantly share code, notes, and snippets.

@anilkk

anilkk/index.html

Created July 25, 2013 13:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anilkk/6079749 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anilkk/6079749 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by anilbms. Smashing lion using CSS3
Raw
index.html
<h1>Smashing Lion using CSS3</h1>
<!-- Lion structure starts here-->
<!-- Lion head starts here-->
<div class="lionHead">
<div class="lionFace">
<!--Left side of the face-->
<div class="halfFace">
<div class="faceComponentHolder">
<div class="ear">
<div class="earInside"></div>
</div>
<div class="curve eye"></div>
<div class="nose"></div>
<div class="noseTip"></div>
<div class="mouth">
<div class="curve mouthBottom"> <span class="noseHol">:.</span>
<div class="mustacheHolder">
<div class="curve mustacheHair"></div>
<div class="curve mustacheHair mustacheHair2nd"></div>
<div class="curve mustacheHair mustacheHair3rd"></div>
</div>
</div>
</div>
</div>
</div>
<!--Right side of the face, same as left side with extra class-faceRight-->
<div class="halfFace faceRight">
<div class="faceComponentHolder">
<div class="ear">
<div class="earInside"></div>
</div>
<div class="curve eye"></div>
<div class="nose"></div>
<div class="noseTip"></div>
<div class="mouth">
<div class="curve mouthBottom"> <span class="noseHol">:.</span>
<div class="mustacheHolder">
<div class="curve mustacheHair"></div>
<div class="curve mustacheHair mustacheHair2nd"></div>
<div class="curve mustacheHair mustacheHair3rd"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Lion head ends-->
<!-- Lion body starts here-->
<div class="lionBody">
<div class="frontSideBody">
<span class="frontLeftLegGap">)</span>
<span class="frontRightLegGap">(</span>
</div>
<div class="rightLegThigh">
<span class="gap">(</span>
</div>
<div class="rightFrontSideLeg"></div>
<!-- Tail starts here-->
<div class="tail">
<span class="tailbody">~</span>
<span class="tailend"></span>
</div>
</div><!--Lion body ends-->
<!-- Lion structure ends-->
Raw
style.css
body {
position: relative;
margin: 25px auto;
width: 960px
}
h1 {
padding: 0 0 20px 0;
}
a {
cursor: pointer;
}
footer {
position: fixed;
left: 100px;
top: 500px;
z-index: 3000;
}
.curve {
/* common shape*/
width: 50px;
height: 50px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: 5px solid black;
border-top: none;
border-right: none;
-moz-transform: scale(0.6) rotatez(-45deg);
-ms-transform: scale(0.6) rotatez(-45deg);
-o-transform: scale(0.6) rotatez(-45deg);
-webkit-transform: scale(0.6) rotatez(-45deg);
transform: scale(0.6) rotatez(-45deg)
}
/*Lion styling starts here*/
/*Lion head starts hear*/
.lionHead {
width: 250px;
height: 250px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
background-color: #F7793E;
border: 5px dashed #F7793E;
-webkit-background-clip: padding-box;
background-clip: padding-box;
position: relative;
/*To appear on top of lion body*/
z-index: 2000;
}
.lionFace {
width: 250px;
height: 250px;
position: relative;
left: 35px;
top: -20px
}
.halfFace {
background-color: #FFDC2E;
width: 100px;
height: 200px;
-moz-border-radius: 100px 0 0 100px;
-webkit-border-radius: 100px 0 0 100px;
border-radius: 100px 0 0 100px;
-moz-transform: scale(0.8) translate(0, 60px);
-ms-transform: scale(0.8) translate(0, 60px);
-o-transform: scale(0.8) translate(0, 60px);
-webkit-transform: scale(0.8) translate(0, 60px);
transform: scale(0.8) translate(0, 60px)
}
.faceRight {
-moz-transform: scale(0.8) rotatey(180deg) translate(-100px, -190px);
-ms-transform: scale(0.8) rotatey(180deg) translate(-100px, -190px);
-o-transform: scale(0.8) rotatey(180deg) translate(-100px, -190px);
-webkit-transform: scale(0.8) rotatey(180deg) translate(-100px, -190px);
transform: scale(0.8) rotatey(180deg) translate(-100px, -190px)
}
.faceComponentHolder {
width: 200px;
height: 200px;
position: relative;
left: 52px;
top: -40px
}
/* ear styling*/
.ear {
width: 50px;
height: 50px;
background-color: #FFDC2E;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
position: relative;
left: -65px;
top: 40px
}
.earInside {
width: 25px;
height: 25px;
background-color: white;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
position: relative;
left: 13px;
top: 13px
}
/* eye styling*/
.eye {
-moz-transform: scale(0.4) rotatez(-45deg) translate(-150px, 56px);
-ms-transform: scale(0.4) rotatez(-45deg) translate(-150px, 56px);
-o-transform: scale(0.4) rotatez(-45deg) translate(-150px, 56px);
-webkit-transform: scale(0.4) rotatez(-45deg) translate(-150px, 56px);
transform: scale(0.4) rotatez(-45deg) translate(-150px, 56px);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px
}
/* Nose styling*/
.nose {
width: 75px;
height: 50px;
border: 2px solid white;
border-left: none;
border-bottom: none;
-moz-transform: skew(0deg, 25deg) translate(-40px, 20px);
-ms-transform: skew(0deg, 25deg) translate(-40px, 20px);
-o-transform: skew(0deg, 25deg) translate(-40px, 20px);
-webkit-transform: skew(0deg, 25deg) translate(-40px, 20px);
transform: skew(0deg, 25deg) translate(-40px, 20px)
}
.noseTip {
width: 0;
height: 0;
border-top: 20px solid black;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
-moz-transform: translate(25px, 20px);
-ms-transform: translate(25px, 20px);
-o-transform: translate(25px, 20px);
-webkit-transform: translate(25px, 20px);
transform: translate(25px, 20px)
}
/* Mouth styling*/
.mouth {
position: relative;
left: 40px;
top: -95px
}
.mouthBottom {
-moz-transform: scale(0.6) rotatez(-45deg) translate(-120px, 38px);
-ms-transform: scale(0.6) rotatez(-45deg) translate(-120px, 38px);
-o-transform: scale(0.6) rotatez(-45deg) translate(-120px, 38px);
-webkit-transform: scale(0.6) rotatez(-45deg) translate(-120px, 38px);
transform: scale(0.6) rotatez(-45deg) translate(-120px, 38px)
}
.noseHol {
width: 20px;
height: 10px;
position: relative;
left: 14px;
font-size: 3em;
top: -5px
}
/* Mustache styling*/
.mustacheHair {
-moz-transform: scale(1.6) rotatez(-15deg) translate(60px, 29px) skew(32deg, 38deg);
-ms-transform: scale(1.6) rotatez(-15deg) translate(60px, 29px) skew(32deg, 38deg);
-o-transform: scale(1.6) rotatez(-15deg) translate(60px, 29px) skew(32deg, 38deg);
-webkit-transform: scale(1.6) rotatez(-15deg) translate(60px, 29px) skew(32deg, 38deg);
transform: scale(1.6) rotatez(-15deg) translate(60px, 29px) skew(32deg, 38deg);
border-bottom: none;
border-left: none;
border-top: 5px solid black
}
.mustacheHair2nd {
-moz-transform: scale(1.6) rotatez(5deg) translate(52px, -15px) skew(32deg, 38deg);
-ms-transform: scale(1.6) rotatez(5deg) translate(52px, -15px) skew(32deg, 38deg);
-o-transform: scale(1.6) rotatez(5deg) translate(52px, -15px) skew(32deg, 38deg);
-webkit-transform: scale(1.6) rotatez(5deg) translate(52px, -15px) skew(32deg, 38deg);
transform: scale(1.6) rotatez(5deg) translate(52px, -15px) skew(32deg, 38deg)
}
.mustacheHair3rd {
-moz-transform: scale(1.6) rotatez(25deg) translate(22px, -50px) skew(32deg, 38deg);
-ms-transform: scale(1.6) rotatez(25deg) translate(22px, -50px) skew(32deg, 38deg);
-o-transform: scale(1.6) rotatez(25deg) translate(22px, -50px) skew(32deg, 38deg);
-webkit-transform: scale(1.6) rotatez(25deg) translate(22px, -50px) skew(32deg, 38deg);
transform: scale(1.6) rotatez(25deg) translate(22px, -50px) skew(32deg, 38deg)
}
.mustacheHolder {
-moz-transform: rotatey(175deg) rotatez(-80deg) translate(90px, 50px);
-ms-transform: rotatey(175deg) rotatez(-80deg) translate(90px, 50px);
-o-transform: rotatey(175deg) rotatez(-80deg) translate(90px, 50px);
-webkit-transform: rotatey(175deg) rotatez(-80deg) translate(90px, 50px);
transform: rotatey(175deg) rotatez(-80deg) translate(90px, 50px)
}
/*lion Head animation*/
.lionHead {
-webkit-animation: lionHeadAnimate 5s infinite alternate linear;
}
@-webkit-keyframes lionHeadAnimate {
0% {
-webkit-transform: rotateZ(0deg);
}
50% {
-webkit-transform: scale(1.2) rotateZ(5deg);
}
100% {
-webkit-transform: scale(1.2) rotateZ(-5deg);
}
}
/*Lion Head ends*/
/*Lion styling ends*/
/*Lion body styling starts here*/
.lionBody {
position: relative;
z-index: 1000;
-moz-transform: scale(1.2) translate(43px, -305px);
-ms-transform: scale(1.2) translate(43px, -305px);
-o-transform: scale(1.2) translate(43px, -305px);
-webkit-transform: scale(1.2) translate(43px, -305px);
transform: scale(1.2) translate(43px, -305px);
left: 50px
}
.frontSideBody {
width: 200px;
height: 126px;
-moz-border-radius: 150px/100px;
-webkit-border-radius: 150px/100px;
border-radius: 150px/100px;
background: #FFDC2E;
-moz-transform: scale(1.1) rotatez(-5deg) translate(-12px, 284px);
-ms-transform: scale(1.1) rotatez(-5deg) translate(-12px, 284px);
-o-transform: scale(1.1) rotatez(-5deg) translate(-12px, 284px);
-webkit-transform: scale(1.1) rotatez(-5deg) translate(-12px, 284px);
transform: scale(1.1) rotatez(-5deg) translate(-12px, 284px)
}
.frontLeftLegGap {
display: inline-block;
font-size: 3em;
color: white;
font-family: arial;
-moz-transform: scale(1.3) rotatez(-28deg) translate(-2px, 45px);
-ms-transform: scale(1.3) rotatez(-28deg) translate(-2px, 45px);
-o-transform: scale(1.3) rotatez(-28deg) translate(-2px, 45px);
-webkit-transform: scale(1.3) rotatez(-28deg) translate(-2px, 45px);
transform: scale(1.3) rotatez(-28deg) translate(-2px, 45px)
}
.frontRightLegGap {
display: inline-block;
font-size: 3em;
color: white;
font-family: arial;
-moz-transform: scale(1.4) rotatez(88deg) translate(60px, -38px);
-ms-transform: scale(1.4) rotatez(88deg) translate(60px, -38px);
-o-transform: scale(1.4) rotatez(88deg) translate(60px, -38px);
-webkit-transform: scale(1.4) rotatez(88deg) translate(60px, -38px);
transform: scale(1.4) rotatez(88deg) translate(60px, -38px)
}
.rightLegThigh {
width: 120px;
height: 120px;
background: #FFDC2E;
margin: 50px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
color: white;
font-size: 3em;
-moz-transform: translate(105px, 150px);
-ms-transform: translate(105px, 150px);
-o-transform: translate(105px, 150px);
-webkit-transform: translate(105px, 150px);
transform: translate(105px, 150px)
}
.rightLegThigh .gap {
display: inline-block;
-moz-transform: scale(1.2) rotatez(-15deg) translate(-7px, 46px);
-ms-transform: scale(1.2) rotatez(-15deg) translate(-7px, 46px);
-o-transform: scale(1.2) rotatez(-15deg) translate(-7px, 46px);
-webkit-transform: scale(1.2) rotatez(-15deg) translate(-7px, 46px);
transform: scale(1.2) rotatez(-15deg) translate(-7px, 46px)
}
.rightFrontSideLeg {
width: 300px;
height: 200px;
background: #FFDC2E;
margin: 50px;
-moz-border-radius: 150px/100px;
-webkit-border-radius: 150px/100px;
border-radius: 150px/100px;
-moz-transform: scale(0.2) rotate(15deg) skew(112deg, 0deg) translate(-10px, 0);
-ms-transform: scale(0.2) rotate(15deg) skew(112deg, 0deg) translate(-10px, 0);
-o-transform: scale(0.2) rotate(15deg) skew(112deg, 0deg) translate(-10px, 0);
-webkit-transform: scale(0.2) rotate(15deg) skew(112deg, 0deg) translate(-10px, 0);
transform: scale(0.2) rotate(15deg) skew(112deg, 0deg) translate(-10px, 0)
}
.tailbody {
color: #FFDC2E;
font-size: 10em;
-moz-transform: scale(2) rotatez(-90deg) rotatex(-180deg) translate(190px, -136px);
-ms-transform: scale(2) rotatez(-90deg) rotatex(-180deg) translate(190px, -136px);
-o-transform: scale(2) rotatez(-90deg) rotatex(-180deg) translate(190px, -136px);
-webkit-transform: scale(2) rotatez(-90deg) rotatex(-180deg) translate(190px, -136px);
transform: scale(2) rotatez(-90deg) rotatex(-180deg) translate(190px, -136px);
display: inline-block
}
.tailend {
display: inline-block;
width: 50px;
height: 25px;
-moz-border-radius: 50px/25px;
-webkit-border-radius: 50px/25px;
border-radius: 50px/25px;
background-color: #F7793E;
-moz-transform: translate(225px, -500px);
-ms-transform: translate(225px, -500px);
-o-transform: translate(225px, -500px);
-webkit-transform: translate(225px, -500px);
transform: translate(225px, -500px)
}
/*lion tail animation*/
.tail {
-webkit-animation: lionTailAnimate 5s infinite alternate linear;
}
@-webkit-keyframes lionTailAnimate {
0% {
-webkit-transform: rotateX(-25deg) rotateZ(34deg) rotateY(0deg) translate(-180px, 150px);
}
100% {
/*-webkit-transform: rotateX(-42deg) rotateZ(56deg) translate(-280px, 280px); */
-webkit-transform: rotateX(-55deg) rotateZ(72deg) rotateY(-3deg) translate(-356px, 350px);
}
}
/*Lion body styling starts here*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment