Jasa SEO,Jasa Pembuatan Website.
17 February, 2020
Deadpool Logo With pure CSS

How Make Deadpool Logo With pure CSS

Deadpool Logo With pure CSS, Here is a Video how to make Deadpool logo

Deadpool Logo With pure CSS, Here is a code how to make Deadpool logo

Index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Image Parallax</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
       <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <title>Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
     
        <label>
           <div class="logo">
               <input type="checkbox" name=""> 
                <div class="circle-outer"></div>
                <div class="face">
                   <div class="eyel"></div>
                   <div class="eyer"></div>
                   <div class="face-shadow"></div>
                     <div class="eyel-shade">
                        <div class="a"></div> 
                      </div>
                    <div class="face-line"></div>
                            <div class="eyer-shade">
                              <div class="eyr-s"></div>
                            </div>      
                  </div>
                  <div class="body">
                      <div class="neck"></div>
                      <div class="neck-red"></div>
                      <div class="chest"></div>
                      <div class="line"></div>
                      <div class="linev"></div>
                      <div class="shoulder"></div>
                      <div class="shoulder-red"></div>
                      <div class="belt"></div>
                      <div class="belt-upper"></div>
                      <div class="shoulder2"></div>
                  </div>
                      <div class="sword1"></div>
                      <div class="sword2"></div>
            </div>
        </label>

      </div>
    
    </body>
    </html>

Style.css

 

body{
left: 0;
top: 0;
background-color: #000;
transition: .7s;

}
body{
font-family: sans-serif;
outline: none;


}
input{
-webkit-appearance:none;

}
.logo{
position: absolute;
top: 30%;
left: 40%;
height: 250px;
width: 250px;
border: 1px solid #000;
background: linear-gradient(to right ,#d6ab4a 50%,#255d6a 50%);
border-radius: 50%;
/*overflow: hidden;*/

}
/*.circle-outer {
position: absolute;
top: 0%;
left: 0%;
height: 250px;
width: 250px;
border: 0px solid #000;


border-radius: 50%;
transition: .7s;
z-index: 0;
}*/

.face {
position: absolute;
top: -55%;
left: -29%;
transform: translate(150%,50%);
height: 167px;
width: 100px;
border: 0px solid #bf2929;
border-radius: 65% 65% 80% 80%;
z-index: 3;
background-color: #bf2929;
transition: .7s;
overflow: hidden;
}
.neck {
position: absolute;
top: 31%;
left: 38%;
width: 50px;
height: 50px;
border-bottom: 25px solid #000;
border-right: 25px solid #000;
border-radius: 0 0 100%;
transform: rotate(40.5deg);
z-index: 3;
}
.neck-red {
position: absolute;
top: 30%;
left: 39%;
width: 62px;
height: 62px;
border-bottom: 5px solid #bf2929;
border-right: 5px solid #bf2929;
border-radius: 0 0 100%;
transform: rotate(40.5deg);
z-index: 3;
}
.chest {
position: absolute;
top: 40%;
left: -6%;
width: 200px;
height: 300px;
border-top: 3px solid #000;
border-left: 3px solid #000;
border-bottom: 3px solid #000;
border-right: 3px solid #000;
border-radius: 75px 0 0 0;
background-color: #bf2929;
transform: rotate(53.8deg);
z-index: 2 ;
}
.line {
position: absolute;
top: 68%;
left: 23%;
border-top: 4px solid #000;
width: 158px;
z-index: 4;
}
.linev {
position: absolute;
top: 68%;
left: 50%;
border-left: 4px solid #000;
height: 100px;
z-index: 4;
}
.shoulder {
position: absolute;
top: 50%;
left: -5%;
width: 50px;
height: 118px;
border: 1px solid #000;
background-color: #000;
border-radius: 43%;
box-shadow: inset 28px -15px 19px 0px rgb(37, 93, 106);
transform: rotate(48deg);
z-index: 2;
}
.shoulder-red {
position: absolute;
top: 39%;
left: 20%;
width: 31px;
height: 100px;
border: 1px solid #000;
background-color: #bf2929;
border-radius: 30%;
transform: rotate(56.5deg);
z-index: 1;
}
.belt {
position: absolute;
/* position: relative; */
top: 47%;
left: 67.4%;
width: 37px;
border-width: 40px 0px 0;
border-style: solid;
border-color: #0c1517;
transform: rotate(22deg);
z-index: 2;
}
.belt:before {
content: "";
position: absolute;
top: 30%;
left: 0;
width: 8px;
height: 0px;
border-bottom: 24px solid #172427;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
transform: rotate(180deg);
}
.belt-upper {
position: absolute;
/* position: relative; */
top: 64%;
left: 54%;
width: 21px;
border-width: 163px 0px 0;
border-style: solid;
border-color: black;
transform: rotate(202deg);
z-index: 2;
}
.shoulder2 {
position: absolute;
top: 47%;
left: 75%;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #000;
border-radius: 32%;
box-shadow: inset 21px 9px 33px 0px rgb(37, 93, 106);

transform: rotate(-40deg);
z-index: 1;
}
.eyel {
position: absolute;
top: 39%;
left: 20%;
border: 8px solid #fff;
border-radius: 0 80% 0 80%;
transform: rotate(-45deg);
transition: .7s;
z-index: 3;
}
.eyer {
position: absolute;
top: 39%;
left: 62%;
border: 8px solid #fff;
border-radius: 0 80% 0 80%;
transform: rotate(-45deg);
transition: .7s;
z-index: 4;
}
.face-shadow {
position: absolute;
top: 0%;
left: 80%;
height: 161px;
width: 50px;
border: 2px solid #000;
background-color: #000;
border-radius: 20% 81% 0 0%;
/* transform: rotate(-45deg); */
z-index: 3;
}
.eyel-shade {
position: absolute;
top: 15%;
left: 51.5%;
height: 161px;
width: 106px;
background-color: #000;
border: 0px solid #000;
box-shadow: inset -7px 34px 12px -5px rgba(37,93,106,1);

border-radius: 30% 0% 0 0%;
z-index: 2;
overflow: hidden;
}
.face-line {
position: absolute;
top: -3%;
left: 16%;
height: 188px;
/* width: 106px; */
/* background-color: #000; */
border-left: 4px solid #000;
border-radius: 2%;
z-index: 2;
transform: skew(2deg);
z-index: 2;
}
.eyer-shade {
position: absolute;
top: 18%;
left: 9%;
height: 75px;
width: 37px;
background-color: #000;
border: 0px solid #000;
box-shadow: inset 2px 30px 12px -5px rgba(37,93,106,1);

border-radius: 60% 60% 60% 60%;
z-index: 2;
overflow: hidden;
z-index: 1;
}
.eyer-s {
position: absolute;
top: 35%;
left: 35%;
height: 89px;
width: 37px;
background-color: rgb(0, 0, 0);
border: 2px solid #000000;
border-radius: 60% 104% 60% 60%;

transform: rotate(-25deg);
z-index:2;
}
.body{
position: absolute;
top: 0%;
left: 0%;
height: 250px;
width: 250px;
border: 0px;
border-radius: 50%;
overflow: hidden;
}.sword1 {

position: absolute;
top: 0%;
left: 75%;
height: 200px;
width: 15px;
border-left: 5px solid #d6ab4a;
background-color: #000;
transform: rotate(23deg);
}
.sword2 {
position: absolute;
top: 00%;
left: 22%;
height: 200px;
width: 15px;
border-right: 5px solid #255d6a;
background-color: #000;
transform: rotate(-23deg);
}


.logo:hover{
cursor: pointer;

}

input:checked ~ .face .eyel {

border: 8px solid #fff;
border-radius: 0 100% 0 100%;
transform: rotate(-45deg);
box-shadow: 0 0px 10px 2px rgba(255,255,255,1); z-index: 4;
transition: .7s;
}
input:checked ~ .face .eyer {

border: 8px solid #fff;
border-radius: 0 100% 0 100%;
transform: rotate(-45deg);
box-shadow: 0 0px 10px 2px rgba(255,255,255,1);
z-index: 4;
transition: .7s;
}

input:checked ~ .face {
position: absolute;
top: -54.5%;
left: -33%;
transform: translate(150%,50%);
height: 170px;
width: 105px;
z-index: 4;
transition: .5s;
}
input:checked ~ .circle-outer {
box-shadow: 0 0px 88px -14px rgba(255,255,255,1);
transition: .5s;
}

to Learn More click here

subcribe to our youtube channel click here

Share

Leave a Reply

Your email address will not be published. Required fields are marked *