Skip to content

Instantly share code, notes, and snippets.

@mutukrish
Created October 7, 2012 09:42
Show Gist options
  • Save mutukrish/3847683 to your computer and use it in GitHub Desktop.
Save mutukrish/3847683 to your computer and use it in GitHub Desktop.
Used all css3 techniques possible
.container
.frog
.left-eye
.right-eye
.mouth
@import "compass";
.container{
margin: 120px auto;
width: 20%;
.frog{
background: none repeat scroll 0 0 #92AE57;
border-radius: 50% 50% 50% 50%;
height: 0;
padding-top: 60%;
position: relative;
width: 100%;
&:after{
background: none repeat scroll 0 0 #6F8346;
border-radius: 50% 50% 50% 50%;
content: "";
height: 10%;
left: 42.00%;
position: absolute;
top: 56.00%;
width: 6%;
z-index: 1;
}
&:before{
background: none repeat scroll 0 0 #6F8346;
border-radius: 50% 50% 50% 50%;
content: "";
height: 10%;
left: 50.00%;
position: absolute;
top: 56.00%;
width: 6%;
z-index: 1;
}
.left-eye,.right-eye{
background: none repeat scroll 0 0 #FFE13B;
border: 10px solid #92AE57;
border-radius: 50% 50% 50% 50%;
height: 68.00%;
left: -4.00%;
position: absolute;
top: -18.00%;
width: 45.00%;
&:before{
background: none repeat scroll 0 0 black;
border-radius: 50% 50% 50% 50%;
content: "";
height: 38%;
left: 50%;
margin-left: -17.0%;
margin-top: -19%;
position: absolute;
top: 50%;
width: 35%;
}
}
.right-eye{
left: auto;
right:-4.5%;
}
.mouth{
height: 50%;
left: 1.7%;
overflow: hidden;
position: absolute;
top: 60%;
width: 100%;
&:after{
background: none repeat scroll 0 0 #71803F;
border-radius: 50% 50% 50% 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: -50%;
width: 97%;
background: none repeat scroll 0 0 #92AE57;
height: 80%;
left: 0;
top: -40%;
}
&:before{
background: none repeat scroll 0 0 #71803F;
border-radius: 50% 50% 50% 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: -50%;
width: 97%;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment