Kirby

In this example below you will see how to do a Kirby with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by iamfelipemattos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright iamfelipemattos ©
  • HTML
  • CSS
  • JavaScript
    
    <!-- contexto do kirby -->
    <div class="kirby">
        <div class="braco esquerdo"></div>
        <div class="braco direito"></div>
        <div class="olho esquerdo"></div>
        <div class="olho direito"></div>
        <div class="bochecha esquerda"></div>
        <div class="bochecha direita"></div>
        <div class="bochecha direita"></div>
        <div class="boca"></div>
        <div class="pe direito"></div>
        <div class="pe esquerdo"></div>
    </div>


/*Downloaded from https://www.codeseek.co/iamfelipemattos/kirby-jrKWYB */
    .kirby {
  margin: 100px auto;
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #FFDCE8;
  box-shadow: 4px -36px 50px 31px #ECA9B3 inset;
  .braco {
    &.esquerdo {
      position: absolute;
      top: -10px;
      left: -32px;
      width: 114px;
      height: 170px;
      background-color: #FFDCE8;
      border-radius: 50%;
      transform: rotate(180deg);
      z-index: -1;
      box-shadow: -13px -11px 40px #ECA9B3 inset;
    }
    &.direito {
      position: absolute;
      top: 111px;
      right: -33px;
      width: 124px;
      height: 170px;
      background-color: #FFDCE8;
      z-index: -1;
      border-radius: 50%;
      transform: rotate(150deg);
      box-shadow: -23px -42px 70px #ECA9B3 inset;
    }
  }
  .olho {
    &.esquerdo {
      position: absolute;
      top: 80px;
      left: 120px;
      width: 45px;
      height: 110px;
      background-color: #000;
      -moz-border-radius: 50% / 50%;
      -webkit-border-radius: 50% / 50%;
      border-radius: 50% / 50%;
      &:after {
        content: "";
        position: absolute;
        width: 25px;
        height: 45px;
        border-radius: 50% / 80% 80% 39% 30%;
        top: 5%;
        right: 10px;
        background-color: #F5F6F8;
      }
    }
    &.direito {
      position: absolute;
      top: 80px;
      right: 120px;
      width: 45px;
      height: 110px;
      background-color: #000000;
      -moz-border-radius: 50%/50%;
      -webkit-border-radius: 50%/50%;
      border-radius: 50%/50%;
      &:after {
        content: "";
        position: absolute;
        width: 25px;
        height: 45px;
        border-radius: 50%/80% 80% 39% 30%;
        top: 5%;
        right: 10px;
        left: 10px;
        background-color: #F5F6F8;
      }
    }
  }
  .bochecha {
    &.esquerda {
      position: absolute;
      top: 175px;
      left: 60px;
      width: 60px;
      height: 35px;
      background-color: #FE8ABB;
      border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
      box-shadow: -13px -11px 40px #FE8ABB inset;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -ms-filter: blur(5px);
      -o-filter: blur(5px);
      filter: blur(3px);
      transform: rotate(10deg);
    }
    &.direita {
      position: absolute;
      top: 181px;
      right: 55px;
      width: 60px;
      height: 30px;
      background-color: #FE8ABB;
      border-radius: 50%;
      box-shadow: -13px -11px 40px #FE8ABB inset;
      filter: blur(5px);
      transform: rotate(-8deg);
    }
  }
  .boca {
    position: absolute;
    top: 215px;
    left: 160px;
    background-color: #713236;
    width: 80px;
    height: 60px;
    border-radius: 50%/20% 20% 80% 80%;
    &:after {
      content: "";
      position: absolute;
      bottom: 1%;
      left: 11px;
      background-color: #E3572C;
      width: 59px;
      height: 30px;
      border-radius: 50%/30% 30% 65% 75%;
    }
  }
  .pe {
    &.esquerdo {
      position: absolute;
      z-index: -1;
      width: 440px;
      height: 110px;
      border-radius: 50% / 85% 85% 15% 39%;
      top: 280px;
      left: -75px;
      background-color: #FF420A;
      transform: rotate(-15deg);
    }
    &.direito {
      position: absolute;
      z-index: -1;
      width: 440px;
      height: 110px;
      border-radius: 50% / 85% 85% 15% 39%;
      top: 280px;
      right: -75px;
      background-color: #FF420A;
      transform: rotate(15deg);
    }
  }
}


/*Downloaded from https://www.codeseek.co/iamfelipemattos/kirby-jrKWYB */
    

Comments