CSS Drawing - Mustache

CSS Drawing - 

It was my first attempt to  draw shapes using css. I followed the tutorial :

 

  • We can draw shapes using css divisions.

There are 4 factors that can be manipulated to create different shapes. 

  1. Box structure of element
  2. shadow
  3. border
  4. border radius
In this project, we have also added little animation.

This mustache is made from only one div. Using 2 shadows of the div.

I have done some measurement adjustments according to the size. It is not completely done yet though.(Responsive website) 

  • HTML code:

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>Mustach</title>

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

  </head>

  <body>

    <div class="mustach"></div>

  </body>

</html>


  • CSS code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media all and (min-width:540px) {
  .mustach{
    width: 100px;
    height: 100px;
    color: black;
    position: absolute;
    /* background-color: currentColor; */

    border-radius: 50%;

    box-shadow:
    170px 250px 0 0,
    250px 250px 0 0;
  }

  .mustach::before{
    content: " ";
    /* color: currentColor; */
    position: absolute;
    left: 143px;
    top: 130px;
    width: 110px;
    height: 110px;
    border-bottom: solid 98px currentColor;
    border-radius: 0 0 0 100%;
    transform: rotate(-40deg);
    transform-origin: right 210px;
    /* background-color: currentColor; */
  }

  .mustach::after{
    content: " ";
    /* color: currentColor; */
    position: absolute;
    left: 268px;
    top: 130px;
    width: 110px;
    height: 110px;
    border-bottom: solid 98px currentColor;
    border-radius: 0 0 100% 0;
    transform: rotate(40deg);
    transform-origin: left 210px;
    /* background-color: currentColor; */
  }

  /* ANIMATION */
  .mustach::before{
    animation: shakeLeft 1s ease-in-out infinite;
  }
  .mustach::after{
    animation: shakeRight 1s ease-in-out infinite;
  }

  @keyframes shakeLeft {
    0%{
      transform: rotate(-50deg);
    }
    50%{
      transform: rotate(-30deg);
    }
    100%{
      transform: rotate(-50deg);
    }
  }

  @keyframes shakeRight {
    0%{
      transform: rotate(50deg);
    }
    50%{
      transform: rotate(30deg);
    }
    100%{
      transform: rotate(50deg);
    }
  }

}
@media all and (min-width:900px) {
  .mustach{
    width: 180px;
    height: 180px;
    color: black;
    position: absolute;
    /* background-color: currentColor; */

    border-radius: 50%;

    box-shadow:
      280px 200px 0 0,
      410px 200px 0 0;
  }

  .mustach::before{
    content: " ";
    /* color: currentColor; */
    position: absolute;
    left: 160px;
      top: -7px;
    width: 210px;
    height: 210px;
    border-bottom: solid 180px currentColor;
    border-radius: 0 0 0 100%;
    transform: rotate(-40deg);
    transform-origin: right 310px;
    /* background-color: currentColor; */
  }

  .mustach::after{
    content: " ";
    /* color: currentColor; */
    position: absolute;
    left: 500px;
      top: -7px;
    width: 210px;
    height: 210px;
    border-bottom: solid 180px currentColor;
    border-radius: 0 0 100% 0;
    transform: rotate(40deg);
    transform-origin: left 310px;
    /* background-color: currentColor; */
  }

  /* ANIMATION */
  .mustach::before{
    animation: shakeLeft 1s ease-in-out infinite;
  }
  .mustach::after{
    animation: shakeRight 1s ease-in-out infinite;
  }

  @keyframes shakeLeft {
    0%{
      transform: rotate(-50deg);
    }
    50%{
      transform: rotate(-30deg);
    }
    100%{
      transform: rotate(-50deg);
    }
  }

  @keyframes shakeRight {
    0%{
      transform: rotate(50deg);
    }
    50%{
      transform: rotate(30deg);
    }
    100%{
      transform: rotate(50deg);
    }
  }

}


  • Difficulties:
  1. It was really difficult to adjust the measurements.
  2. Still don't know how the 'transform-origin' property works. 😅 

Comments

Post a Comment

Popular Posts