Monday, 17 February 2020

CSS Ninja

 – by No comments

CSS NINJA

output image
CSS Ninja


HTML:
<html>
<head>
<title>Ninja</title>
<link rel="stylesheet" href="ninja.css">
</head>
<body>
<div class="all">
<div class="ninja">
<div class="ribon"></div>
<div class="head">
<div class="eye1"></div>
<div class="eye2"></div>
</div>
<div class="bod">
<div class="hand1"></div>
<div class="hand2"></div>
<div class="leg1"></div>
<div class="leg2"></div>
</div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
view raw ninja.html hosted with ❤ by GitHub


CSS:
body {
background-color: white;
}
.all {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ribon {
content: "";
width: 150px;
height: 12px;
background: #e62117;
position: absolute;
left: 150px;
top: 20px;
}
.ribon:before {
content: "";
width: 150px;
height: 12px;
background: #e62117;
position: absolute;
transform: rotate(-25deg);
top: -15px;
left: -22px;
z-index: 1;
}
.ribon:after {
content: "";
width: 0px;
height: 0px;
position: absolute;
/*border-left:6px solid green;*/
border-top: 6px solid transparent;
border-right: 6px solid white;
border-bottom: 6px solid transparent;
left: 144.7px;
}
.head {
width: 200px;
height: 90px;
position: relative;
background: linear-gradient(65deg, #435964 0px 53px,#546e7a 53px 200px);
border-radius: 10px;
z-index: 2;
}
.head:before {
content: "";
position: absolute;
width: 140px;
height: 40px;
background: linear-gradient(65deg, #8EA5AB 0px 20px,#B0BEC5 20px 200px);
top: 25px;
left: 25px;
border-radius: 10px;
}
.head:after {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
/*border-top:7px solid red;*/
/*border-right:5px solid blue;*/
border-bottom: 20px solid #8ca3ab;
top: 45px;
left: 90px;
}
.eye1 {
width: 26px;
height: 4px;
background: #546e7a;
position: absolute;
transform: skew(25deg);
top: 42px;
left: 50px;
}
.eye1:before {
content: "";
width: 6px;
height: 6px;
background: #546e7a;
position: absolute;
transform: skew(-25deg);
border-radius: 6px;
top: 2px;
left: 15px;
}
.eye2 {
width: 22px;
height: 4px;
background: #546e7a;
position: absolute;
top: 38px;
left: 110px;
transform: rotate(-20deg);
}
.eye2:before {
content: "";
width: 9px;
height: 4px;
background: #546e7a;
position: absolute;
top: 6px;
left: 15.5px;
transform: rotate(88deg);
}
.eye2:after {
content: "";
width: 6px;
height: 6px;
background: linear-gradient(#546e7a 0px 5.5px, transparent 5.5px 6px);
position: absolute;
border-radius: 6px;
transform: rotate(20deg);
top: 6px;
left: 10px;
}
.bod {
width: 100px;
height: 100px;
background: linear-gradient(to right, #546f7a 0px 90px, #637b87 90px 100px);
position: relative;
top: 10px;
left: 80px;
transform: skew(20deg);
}
.bod:before {
content: "";
width: 20px;
height: 160px;
background: #435964;
position: absolute;
left: -25px;
top: -21px;
transform: skew(-50deg) rotateZ(-50deg);
}
.bod:after {
content: "";
position: absolute;
width: 160px;
height: 30px;
background: linear-gradient(to right, #435964 0px 150px, #637b87 150px 160px);
top: 100px;
left: -60px;
}
.hand1 {
content: "";
position: absolute;
width: 15px;
height: 8px;
background: #546f7a;
left: 150px;
top: 12px;
transform: skew(-20deg);
}
.hand1:before {
content: "";
position: absolute;
width: 9px;
height: 20px;
background: #546f7a;
left: 5px;
top: -20px;
transform: skew(-20deg);
}
.hand1:after {
content: "";
width: 100px;
height: 20px;
background: linear-gradient(to right, #546f7a 0px 92px, #e62117 92px 100px);
position: absolute;
left: -95px;
top: -12px;
}
.hand2 {
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-right: 80px solid #435964;
border-bottom: 15px solid transparent;
position: absolute;
left: -100px;
top: 17px;
transform: skew(-20deg) rotate(-13deg);
}
.hand2:before {
content: "";
position: absolute;
width: 18px;
height: 80px;
background: linear-gradient(#546f7a 0px 60px, #435964 60px 80px);
transform: rotate(40deg) skew(50deg);
top: -75px;
left: -19px;
}
.hand2:after {
content: "";
position: absolute;
width: 9px;
height: 60px;
background-color: white;
transform: rotate(40deg) skew(50deg);
top: -78px;
left: -14px;
opacity: 0.5;
}
.leg1 {
width: 35px;
height: 80px;
background: linear-gradient(to right, #435964 0px 25px, #546f7a 25px 35px);
position: absolute;
top: 100px;
left: -60px;
}
.leg1:before {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #435964;
top: 60px;
left: -20px;
}
.leg2 {
width: 35px;
height: 95px;
border-radius: 0 0 10px 15px;
background: linear-gradient(to right, #435964 0px 25px, #546f7a 25px 35px);
position: absolute;
top: 100px;
left: 65px;
z-index: 5;
}
.leg2:before {
content: "";
width: 90px;
height: 8px;
background: #435964;
position: absolute;
left: -4px;
transform: skew(-20deg);
}
.leg2:after {
content: "";
width: 0px;
height: 0px;
position: absolute;
/*border-left:6px solid green;*/
border-top: 4px solid transparent;
border-right: 6px solid white;
border-bottom: 4px solid transparent;
left: 80px;
transform: skew(-20deg);
}
.shadow {
width: 70px;
height: 35px;
background: radial-gradient(#546f7a, #435964, #546f7a, #435964);
position: absolute;
top: 320px;
left: 190px;
border-radius: 50px;
opacity: 0.6;
animation-name: shadow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes shadow {
forom {
background: radial-gradient(#546f7a, #435964, #546f7a, #435964);
}
to {
background: radial-gradient(#435964, #546f7a, #435964, #546f7a);
}
}
view raw ninja.css hosted with ❤ by GitHub


OUTPUT:

 Click here to subscribe this page to get notified every-time a new post comes.
Share:

Related Posts:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)