Pure Css - Among Us character

0 31

Written by

Programmer | Web developer

2 years ago

Kung mahilig ka mag laro ng among us ay siguradong magugustuhan mo ang artikulong ito dahil ngayong araw ipapakita ko saiyo kung pano gumawa ng character gamit lamang ang code..

Narito ang codes ng html

<!DOCTYPE html>
<html>

<head>
  <title>Among US</title>
</head>
<link href="amongUs.css" rel="stylesheet">

<body>
 
  <div class="all">
    <div class="main">
    </div>
    <div class="leg"></div>
    <div class="click" onclick="nam()"></div>
    <div class="dp">Red is impostor</div>
  </div>
</body>


</html>

Ang html codes na nasa itaas ay ang siyang magiging silbi upang makagawa tayo ng character sa among us.

Ang sunod na codes ay ang javascript na kung saan pwede mong mapagalaw at para lumabas ang text na "Red is Impostor".

<script>
    
var x = 0;
function nam() {
  var a = document.getElementsByClassName("dp")[0];
  if (x == 0) {
    a.style.width = "235px";
    x++;
  } else {
    a.style.width = "0px";
    x--;
  }
}
</script>

Ang sunod na mga codes ay ang CSS , ito ang mga codes upang mapaganda natin ang ating ginagawa.

Narito ang css codes :

body{
    background-image: url("giphy.gif");
    background-size: cover;
}

.all {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main {
    width: 80px;
    height: 130px;
    background-color: #d9041a;
    border: 8px solid black;
    border-radius: 50px 50px 5px 5px;
    box-shadow: inset 0px -5px 3px 2px #c51021, inset 4px 0px 3px #c51021;
  }
  .main:before {
    position: absolute;
    content: "";
    width: 20px;
    height: 70px;
    background: linear-gradient(#d9041a, #c51021 80%);
    border: 8px solid black;
    left: -30px;
    top: 50px;
    border-radius: 15px 0px 0px 15px;
  }
  .main:after {
    position: absolute;
    content: "";
    width: 60px;
    height: 35px;
    background: #80deea;
    top: 30px;
    left: 30px;
    border: 8px solid black;
    box-shadow: inset 2px -2px 0px 2px #73989e, inset 3px -2px 0px 2px #73989e,
      inset 2px -5px 0px 2px #73989e;
    border-radius: 20px 20px 30px 30px;
  }
  
  .leg {
    width: 28px;
    height: 40px;
    background-color: #c51021;
    border: 8px solid black;
    border-top: none;
    position: relative;
    top: -8px;
    border-radius: 0px 0px 20px 30px;
  }
  .leg:before {
    position: absolute;
    content: "";
    width: 28px;
    height: 40px;
    background-color: #c51021;
    border: 8px solid black;
    border-top: none;
    left: 44px;
    border-radius: 0px 0px 20px 30px;
  }
  .leg:after {
    position: absolute;
    content: "";
    width: 30px;
    height: 10px;
    background: white;
    top: -95px;
    left: 50px;
    border-radius: 20px 20px 30px 30px;
  }
  
  .click {
    width: 110px;
    height: 110px;
    border-radius: 100px;
    background: silver;
    transform: rotateX(50deg);
    position: relative;
    left: -15px;
    top: 5px;
    box-shadow: 0px 15px #808080;
  }
  .click:before {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background-color: #ff4236;
    border-radius: 80px;
    box-shadow: 0px 15px #e53935, 0px 18px #808080;
    left: 15px;
    top: -5px;
  }
  .click:active:before {
    box-shadow: 0px 0px;
    top: 3px;
    box-shadow: 0px 5px #808080;
  }
  /*font-family: 'Changa', sans-serif;*/
  .dp {
    width: 0px;
    height: 40px;
    position: absolute;
    font-family: "Changa", sans-serif;
    font-weight: bolder;
    overflow: hidden;
    font-size: 1.5em;
    top: 320px;
    left: -60px;
    color: green;
  }