MeowBox::Happy-Csser

In this example below you will see how to do a MeowBox::Happy-Csser with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by yuanyu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yuanyu ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MeowBox::Happy-Csser</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="cat">
  <div class="ear"></div>
  <div class="ear"></div>
  <div class="eye"></div>
  <div class="eye"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
  <div class="leftfur"></div>
  <div class="rightfur"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/yuanyu/meowboxhappy-csser-wpPgzX */
html, body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cat {
  height: 50vmin;
  width: 50vmin;
  position: relative;
  box-sizing: border-box;
  padding: 0;
}
.cat .leftfur {
  position: absolute;
  top: 75%;
  left: -40%;
  display: block;
  height: 1.6666666667vmin;
  width: 16.6666666667vmin;
  background-color: #2B4244;
}
.cat .leftfur::after, .cat .leftfur::before {
  position: absolute;
  right: 0;
  content: '';
  display: block;
  height: 1.6666666667vmin;
  width: 12.5vmin;
  background-color: #2B4244;
}
.cat .leftfur::after {
  top: 5vmin;
}
.cat .leftfur::before {
  top: -5vmin;
}
.cat .rightfur {
  position: absolute;
  top: 75%;
  right: -40%;
  content: '';
  display: block;
  height: 1.6666666667vmin;
  width: 16.6666666667vmin;
  background-color: #2B4244;
}
.cat .rightfur::after, .cat .rightfur::before {
  position: absolute;
  left: 0;
  content: '';
  display: block;
  height: 1.6666666667vmin;
  width: 12.5vmin;
  background-color: #2B4244;
}
.cat .rightfur::after {
  top: 5vmin;
}
.cat .rightfur::before {
  top: -5vmin;
}
.cat .ear {
  position: absolute;
  top: 5.3571428571vmin;
  height: 28.9285714286vmin;
  width: 25vmin;
  background-color: #2B4244;
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}
.cat .ear:nth-child(1) {
  border-top-left-radius: 20%;
  -webkit-transform: skewy(30deg);
          transform: skewy(30deg);
}
.cat .ear:nth-child(2) {
  left: 25vmin;
  border-top-right-radius: 20%;
  -webkit-transform: skewy(-30deg);
          transform: skewy(-30deg);
}
.cat .eye {
  position: absolute;
  top: 19.8214285714vmin;
  height: 28.7142857143vmin;
  width: 25vmin;
  background-color: #CACCCE;
  box-sizing: border-box;
}
.cat .eye:nth-child(3) {
  right: 0;
  border-bottom-right-radius: 100%;
  -webkit-transform: skewy(30deg);
          transform: skewy(30deg);
}
.cat .eye:nth-child(4) {
  left: 0;
  background-color: #fff;
  -webkit-transform: skewy(-30deg);
          transform: skewy(-30deg);
}
.cat .nose {
  position: absolute;
  top: 38.5714285714vmin;
  left: 25vmin;
  background-color: #2B4244;
}
.cat .nose::before {
  position: absolute;
  content: '';
  height: 4.2857142857vmin;
  width: 4.2857142857vmin;
  display: block;
  background-color: #2B4244;
  -webkit-transform: skewy(30deg);
          transform: skewy(30deg);
}
.cat .nose::after {
  position: absolute;
  content: '';
  height: 4.2857142857vmin;
  width: 4.2857142857vmin;
  display: block;
  background-color: #2B4244;
  -webkit-transform: translatex(-4.2857142857vmin) skewy(-30deg);
          transform: translatex(-4.2857142857vmin) skewy(-30deg);
}
.cat .mouth {
  position: absolute;
  top: 34.2857142857vmin;
  height: 28.7142857143vmin;
  width: 50vmin;
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}
.cat .mouth::before {
  position: absolute;
  content: '';
  height: 21.4285714286vmin;
  width: 25vmin;
  display: block;
  background-color: #F47C29;
  -webkit-transform: skewy(30deg);
          transform: skewy(30deg);
}
.cat .mouth::after {
  position: absolute;
  content: '';
  right: 0;
  height: 21.4285714286vmin;
  width: 25vmin;
  display: block;
  background-color: #EF4D2A;
  -webkit-transform: skewy(-30deg);
          transform: skewy(-30deg);
}

Comments