Thursday, 27 August 2020

CSS Boy Catching ButterFly

 – by No comments

CSS Boy Catching Butterfly 🦋 


image of the output
CSS BOY 

HTML:

<html>
<head>
<title></title>
<link rel="stylesheet" href="pmain.css">
</head>
<body>
<div class="all">
<div class="boy">
<div class="face"></div>
<div class="cap"></div>
<div class="hair"></div>
<!--after left-->
<div class="bod"></div>
<div class="pant"></div>
<div class="selevs"></div>
<svg class="hand1" widht="400px" height="122px">
<polyline points="100 120,125 119,128 124,140 75,144 60,
130 60,132 72,120 105,100 105 " fill="#FFE0B2" stroke="black" stroke-width="2" stroke-linejoin="bevel">
</polygon>
</svg>
<svg class="hand2" widht="400px" height="122px">
<polyline points="110 120,125 119,128 124,140 75,144 60,
130 60,132 72,120 105,110 105 " fill="#FFE0B2" stroke="black" stroke-width="2" stroke-linejoin="bevel">
</polygon>
</svg>
<svg class="leg1" widht="400px" height="80px">
<polygon points="35 10, 50 30,52 80,65 80,70 30,65 1" fill="#FFE0B2" stroke="black" stroke-width="2" stroke-linejoin="bevel">
</polygon>
</svg>
<svg class="leg2" widht="400px" height="80px">
<polygon points="35 10, 50 30,52 80,65 80,70 30,65 1" fill="#FFE0B2" stroke="black" stroke-width="2" stroke-linejoin="bevel">
</polygon>
</svg>
<div class="shoe1"></div>
<div class="shoe2"></div>
<div class="net"></div>
</div>
</div>
</body>
</html>
view raw boy.html hosted with ❤ by GitHub

CSS:

body {
background: #000000c9;
}
a {
text-decoration: none;
color: white;
font-weight: bolder;
font-size: 1.5em;
font-family: courier;
}
.all {
position: absolute;
transform: translate(-50%, -50%);
left: 65%;
top: 50%;
}
.face {
width: 80px;
height: 80px;
background: #ffe0b2;
border-radius: 100px;
border: 2px solid black;
box-shadow: inset -1px 1px 0px 2px white;
transform: rotate(20deg);
z-index: 2;
position: absolute;
}
.face:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 0px solid transparent;
border-right: 9px solid transparent;
border-bottom: 18px solid #ffe0b2;
left: 72px;
top: 7px;
transform: rotate(-35deg);
}
.face:after {
content: " ";
position: absolute;
width: 80px;
height: 80px;
background: linear-gradient(
to bottom right,
#a97c50 0px 55px,
white 55px 58px,
black 58px 61.5px,
transparent 61.5px 80px
);
border-radius: 100px;
border: 2px solid black;
/*box-shadow:inset -1px 1px 0px 1px white;*/
transform: rotate(-10deg);
top: -1px;
left: -1px;
}
.cap {
width: 80px;
height: 40px;
border-radius: 70px 70px 0px 0px;
background: #bf2c37;
border: 2px solid black;
position: absolute;
top: -50px;
box-shadow: inset -1px 1px 0px 1px white;
transform: rotate(-20deg);
top: -6px;
left: -10px;
z-index: 2;
}
.cap:before {
content: " ";
width: 6px;
height: 5px;
position: absolute;
background: #bf2c37;
border: 1px solid black;
top: -8px;
left: 28px;
}
.cap:after {
content: " ";
position: absolute;
width: 50px;
height: 5px;
background: -webkit-linear-gradient(left, #f31c24 0px 40px, white 40px 50px);
border: 1.5px solid black;
top: 35px;
left: 55px;
}
.hair {
width: 40px;
height: 20px;
background: #a97c50;
border-radius: 0px 0px 40px 40px;
position: absolute;
top: 54px;
left: 8px;
transform: rotate(-30deg);
border-right: 2px solid black;
border-bottom: 2px solid black;
box-shadow: inset -3px 0px 0px 2px white;
z-index: 4;
}
.hair:before {
content: " ";
width: 40px;
height: 20px;
background: #a97c50;
border-radius: 0px 0px 40px 40px;
position: absolute;
top: -3px;
left: -15px;
transform: rotate(60deg);
border-right: 2px solid black;
border-bottom: 1.5px solid black;
border-left: 1px solid black;
/*box-shadow:inset 1px -1px 0px 2px white;*/
}
.bod {
width: 14px;
height: 20px;
background: #ffe0b2;
border: 1.5px solid black;
position: absolute;
top: 80px;
left: 35px;
transform: rotate(5deg);
z-index: 1;
}
.bod:before {
content: " ";
position: absolute;
width: 55px;
height: 100px;
background: #f26522;
border-radius: 25px 25px 0 0;
border: 2px solid black;
top: 7px;
left: -22px;
box-shadow: inset -5px 0px 0px 0px white;
}
.bod:after {
content: " ";
position: absolute;
width: 35px;
height: 16px;
background: #5c6bc0;
top: 20px;
left: 10px;
border-radius: 10px 0 0 10px;
border: 2px solid black;
box-shadow: inset 0px 3px 0px 0px white;
transform: rotate(-3deg);
}
.pant {
width: 45px;
height: 40px;
background: #5c6bc0;
transform: rotate(28deg);
position: absolute;
top: 190px;
left: -7px;
border: 2px solid black;
}
.pant:before {
content: "";
position: absolute;
width: 55px;
height: 15px;
background: #5c6bc0;
transform: rotate(-23deg);
border: 2px solid black;
top: -9px;
left: 2px;
border-radius: 0 0 0 8px;
}
.pant:after {
content: "";
position: absolute;
width: 54px;
height: 45px;
background: #5c6bc0;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg);
left: 15px;
top: -12px;
box-shadow: inset -3px 0px 0px 0px white;
}
.selevs {
width: 20px;
height: 20px;
background: #5c6bc0;
position: absolute;
top: 128px;
left: 50px;
transform: rotate(30deg);
border: 2px solid black;
}
.hand1 {
position: relative;
left: -17px;
top: 1px;
z-index: 10;
}
.hand2 {
position: relative;
top: -62px;
left: -17px;
transform: rotate(30deg);
}
.leg1 {
position: relative;
top: -23px;
left: 0px;
}
.leg2 {
position: relative;
top: -53px;
left: -100px;
transform: rotate(45deg);
}
.shoe1 {
width: 20px;
height: 6px;
position: absolute;
background: white;
transform: rotate(45deg);
top: 282px;
left: -53px;
border: 2px solid black;
border-radius: 5px 5px 0 0;
}
.shoe1:before {
content: " ";
width: 35px;
height: 15px;
background: red;
position: absolute;
top: 8px;
left: -5px;
border: 2px solid black;
border-radius: 5px 15px 5px 5px;
box-shadow: inset -5px 0px 0px 0px white;
}
.shoe1:after {
content: "";
position: absolute;
width: 35px;
height: 5px;
border-radius: 0px 15px 5px 5px;
background: #bf2c37;
top: 20px;
left: -3px;
}
.shoe2 {
width: 20px;
height: 6px;
position: absolute;
background: white;
top: 305px;
left: 48px;
border: 2px solid black;
border-radius: 5px 5px 0 0;
}
.shoe2:before {
content: " ";
width: 35px;
height: 15px;
background: red;
position: absolute;
top: 8px;
left: -5px;
border: 2px solid black;
border-radius: 5px 15px 5px 5px;
box-shadow: inset -5px 0px 0px 0px white;
}
.shoe2:after {
content: "";
position: absolute;
width: 35px;
height: 5px;
border-radius: 0px 15px 5px 5px;
background: #bf2c37;
top: 20px;
left: -3px;
}
.net {
position: absolute;
width: 250px;
height: 0px;
border: 1px solid black;
background: black;
top: 53px;
left: -100px;
z-index: 9;
transform: rotate(8deg);
}
.net:before {
content: "";
position: absolute;
width: 60px;
height: 5px;
background: white;
border: 2px solid black;
}
.net:after {
content: "";
position: absolute;
top: 8px;
left: 5px;
background: url("https://i.ibb.co/FmxvXT7/hexagonos-png-6.png");
background-size: 100%;
width: 50px;
height: 95px;
border: 2px solid black;
border-radius: 0 0 50px 50px;
}
view raw boy.css hosted with ❤ by GitHub

OUTPUT:



Click here to subscribe this page to get
notified every-time a new post come.

Share:

Related Posts:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)