CSS3 Lion

Developer
Jitendra
Size
2,493 Kb
Views
54,648
  1. CSS3 Lion Previews
  2. CSS3 Lion HTML Codes
  3. CSS3 Lion CSS Codes

How do I make an css3 lion?

Inspired by http://dribbble.com/shots/1324788-these-fellas-didnt-make-the-cut. What is a css3 lion? How do you make a css3 lion? This script and codes were developed by Jitendra on 04 July 2022, Monday.

CSS3 Lion Previews
IQ Test

CSS3 Lion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Lion </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="lion">
<div id="lionhair"></div>
<div id="lionface">
<div id="lefteye"></div>
<div id="righteye"></div>
<div id="nose"></div>
</div>
<div id="blueleg"></div>
<div id="orangeleg"></div>
<div id="lionbody"></div>
<div id="rightorangeleg"></div>
<div id="rightblueleg"></div>
<div id="liontail"></div>
</div>
</body>
</html>

CSS3 Lion - Script Codes CSS Codes

*
{
margin:0px;
padding:0px;
outline:none;
}
body{
position:relative;
padding:20px;
background: #fff;
}
#lion
{
width:500px;
position:relative;
margin:0 auto;
}
#lionhair
{
position:relative;
width: 225px;
height: 225px;
border-radius: 90% 80% 90% 0% / 90% 80% 90% 0%;
background:#3a2313;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
z-index:1;
}
#lionface
{
position: absolute;
width: 90px;
height: 90px;
background: #1ebbb5;
left: 66px;
top: 70px;
z-index:2;
}
#lionface:before
{
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 40px solid #1ebbb5;
border-left: 45px solid transparent;
left: 0px;
top: 90px;
}
#lionface:after
{
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 40px solid #1ebbb5;
border-right: 45px solid transparent;
left: 45px;
top: 90px;
}
#lefteye
{
width:0px;
height:0px;
border-top: 90px solid #ec6638;
border-right: 45px solid transparent;
position:relative;
float: left;
}
#lefteye:before
{
width: 30px;
height: 30px;
border-radius: 50%;
background: #ef6537;
content: "";
left: -25px;
top: -115px;
position: absolute;
}
#lefteye:after
{
width: 12px;
height: 12px;
border-radius: 50%;
background: #3a2313;
content: "";
left: 10px;
top: -75px;
position: absolute;
}
#righteye
{
width:0px;
height:0px;
border-top: 90px solid #ec6638;
border-left: 45px solid transparent;
position:relative;
float:right;
}
#righteye:before
{
width: 30px;
height: 30px;
border-radius: 50%;
background: #ef6537;
content: "";
left: -5px;
top: -115px;
position: absolute;
}
#righteye:after
{
width: 12px;
height: 12px;
border-radius: 50%;
background: #3a2313;
content: "";
left: -21px;
top: -75px;
position: absolute;
}
#nose
{
position:absolute;
left:25px;
top:40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid #3a2313;
}
#nose:before
{
content: "";
width: 15px;
height: 15px;
border-bottom: 5px solid #3a2313;
border-left: 5px solid #3a2313;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50%;
left: -22px;
top: -20px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nose:after
{
content: "";
width: 15px;
height: 15px;
border-bottom: 5px solid #3a2313;
border-left: 5px solid #3a2313;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50%;
left: -2px;
top: -20px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#blueleg
{
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 68px solid #1ebbb5;
border-bottom: 80px solid transparent;
position: absolute;
top: 191px;
left: 44px;
z-index: -1;
}
#blueleg:before
{
content: "";
width: 50px;
height: 20px;
border-radius: 25px 25px 0px 0px;
background: #1ebbb5;
position: absolute;
top: 45px;
left: -106px;
box-shadow: 394px -5px 0px #1ebbb5,323px -5px 0px #ef6537,162px 0px 0px #ef6537;
}
#blueleg:after
{
content: "";
width: 20px;
height: 20px;
background: #fff;
position: absolute;
top: 65px;
left: -68px;
}
#orangeleg
{
width: 0;
height: 0;
border-top: 80px solid transparent;
border-right: 68px solid #ef6537;
border-bottom: 80px solid transparent;
position: absolute;
top: 191px;
left: 112px;
z-index: -1;
}
#orangeleg:after
{
content: "";
width: 20px;
height: 20px;
background: #fff;
position: absolute;
top: 65px;
left: 55px;
}
#lionbody
{
width: 300px;
height: 80px;
background: #ef6537;
border-radius: 0px 60px 0px 0px;
position: absolute;
left: 120px;
top: 154px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
#lionbody:before
{
content: "";
width: 165px;
height: 79px;
background: #ef6537;
position: absolute;
left: 69px;
top: 31px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 0% 10% 0% 0%;
}
#rightorangeleg
{
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 90px solid #ef6537;
border-bottom: 80px solid transparent;
position: absolute;
top: 257px;
right: 111px;
z-index: -1;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
z-index:2;
}
#rightorangeleg:after
{
content: "";
width: 20px;
height: 20px;
background: #fff;
position: absolute;
top: 63px;
left: 74px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
#rightblueleg
{
width: 0;
height: 0;
border-top: 0px solid transparent;
border-left: 80px solid #1ebbb5;
border-bottom: 100px solid transparent;
position: absolute;
top: 217px;
right: 37px;
z-index: -1;
-webkit-transform: rotate(-63deg);
-moz-transform: rotate(-63deg);
-ms-transform: rotate(-63deg);
-o-transform: rotate(-63deg);
transform: rotate(-63deg);
z-index: -1;
}
#rightblueleg:before
{
content: "";
width: 50px;
height: 20px;
border-radius: 25px 25px 0px 0px;
background: #ef6537;
position: absolute;
top: -68px;
right: -92px;
-webkit-transform: rotate(118deg);
-moz-transform: rotate(118deg);
-ms-transform: rotate(118deg);
-o-transform: rotate(118deg);
transform: rotate(118deg);
}
#liontail
{
width: 150px;
height: 8px;
background: #ef6537;
right: 72px;
position: absolute;
top: 155px;
-webkit-transform: rotate(53deg);
-moz-transform: rotate(53deg);
-ms-transform: rotate(53deg);
-o-transform: rotate(53deg);
transform: rotate(53deg);
}
#liontail:before
{
content: "";
width: 25px;
height: 25px;
background: transparent;
border-radius: 50%;
border-top: 8px solid #ef6537;
border-left: 8px solid #ef6537;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
left: -22px;
top: -33px;
-webkit-transform: rotate(-53deg);
-moz-transform: rotate(-53deg);
-ms-transform: rotate(-53deg);
-o-transform: rotate(-53deg);
transform: rotate(-53deg);
}
#liontail:after
{
content: "";
width: 80px;
height: 8px;
background: #ef6537;
right: 74px;
top: -33px;
position: absolute;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
CSS3 Lion - Script Codes
CSS3 Lion - Script Codes
Home Page Home
Developer Jitendra
Username berdejitendra
Uploaded July 04, 2022
Rating 4
Size 2,493 Kb
Views 54,648
Do you need developer help for CSS3 Lion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jitendra (berdejitendra) Script Codes
Name
Mobile App Setting Menu animation
Hidden menu on click or touch
Mobile App UI
Log in Form
Personal Identity - One element
Mail icon - One Element
Soft touch two option menu
Mobile Sub Menu Concept
Two joint circles - One element
One element - Pixel Dog
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!