Un bonhomme de neige en CSS

Sur CodePen, vous pourrez découvrir le code pour créer un bonhomme de neige en CSS. Ce code est proposé par Alvaro Montoro. Vous trouverez le lien vers la démonstration en fin d’article.

Comme indiqué sur la page dédiée à ce projet vous allez devoir créer une page HTML et une page CSS :

• code HTML

div class="canvas">
  <div class="hill"></div>
  <div class="shadow"></div>
  <div class="body">
    <div class="button"></div>
    <div class="button"></div>
    <div class="arm"></div>
    <div class="arm"></div>
  </div>
  <div class="thread"></div>
  <div class="scarf-hanging"></div>
  <div class="scarf"></div>
  <div class="head">
    <div class="cheek"></div>
    <div class="cheek"></div>
    <div class="eye"></div>
    <div class="eye"></div>
    <div class="mouth"></div>
    <div class="nose"></div>
  </div>
  <div class="hat-base"></div>
  <div class="hat-top"></div>
</div>

<a id="youtube" href="https://www.youtube.com/watch?v=fXq6G00iKD0" target="_blank">
  <span>See how this demo was coded</span>
</a>

• code CSS :

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#adf, #ddd);
}


.canvas {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvas *,
.canvas *::before,
.canvas *::after {
  position: absolute;
  box-sizing: border-box;
  display: block;
} 

.head {
  width: 43%;
  height: 33%;
  background:
    radial-gradient(170% 100% at 50% 0%, #0005, #0001 37%, #0000 0)
    ;
  background-color: #fff;
  border-radius: 100% / 90% 90% 110% 110%;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow:
    inset 2vmin 0 6vmin 1vmin #fffa,
    inset -2vmin 0 6vmin 1vmin #fffa,
    inset 0 0 4vmin 1vmin #0004,
    0 0.25vmin 0 1vmin
    ;
}

.body {
  width: 59%;
  height: 50%;
  background:
    linear-gradient(45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat 118% 47% / 20% 20%,
    linear-gradient(-45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat -15% 45% / 20% 20%,
    radial-gradient(100% 100% at 50% 0%, #0001 34%, #0000 0)
    ;
  background-color: #fff;
  border-radius: 100% / 110% 110% 90% 90%;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow:
     inset 3vmin 0 5vmin #fffa,
    inset -3vmin 0 5vmin #fffa,
    inset 0 0 6vmin #0004,
    0 0.25vmin 0 1vmin
    ;
}

.scarf {
  width: 37%;
  height: 25%;
  border-radius: 50%;
  background: #d00;
  box-shadow:
    inset 3vmin 1vmin 3vmin -2vmin #fffa,
    inset -3vmin 2vmin 3vmin -2vmin #fffa,
    inset 0 -1vmin 2vmin #8008,
    0 0.25vmin 0 1vmin;
  top: 38%;
  left: 50%;
  transform: translate(-50%);
}

.scarf-hanging {
  width: 10%;
  height: 20%;
  background: #d00;
  top: 50%;
  left: 58%;
  border-radius: 100% 100% 100% 100% / 20% 140% 30% 10%;
  transform: rotate(-3deg);
  box-shadow: 
    inset 3vmin 1vmin 3vmin -2vmin #fff7,
    inset -3vmin 2vmin 3vmin -2vmin #fff7,
    inset 0 -1vmin 2vmin #8008,
    0 0.25vmin 0 1vmin;
}

.thread {
  top: 67%;
  left: 56.5%;
  width: 13.33%;
  height: 7%;
  border-radius: 100% / 50%;
  transform: rotate(-4deg);
  background:
    repeating-linear-gradient(to right, #0000 0 7%, #000 7.5% 14%, #0000 0 14.5%)
}

.button {
  box-shadow: 0 0.25vmin 0 0.8vmin;
  background:
    radial-gradient(circle at 35% 35%, #fff3 20%, #0000 )
    ;
  background-color: black;
  width: 7%;
  height: 9%;
  border-radius: 100% 90% 110% 100%;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

.button + .button {
  top: 60%;
  transform: translateX(-50%) rotate(20deg);
}

.eye {
  --pos: 20%;
  box-shadow: 
    inset 0 0 1vmin 0.125vmin #000,
    inset -0.5vmin -0.5vmin 1vmin #000,
    inset -1.5vmin -1vmin 2vmin #fffb,
    0.25vmin 1.25vmin 0 0.8vmin #0002,
    0 0.25vmin 0 0.8vmin;
  background-color: #222;
  width: 13%;
  height: 22%;
  border-radius: 100% 90% 110% 100%;
  top: 38%;
  left: var(--pos);
  transform: rotate(10deg);
  overflow: hidden;
}

.eye + .eye {
  left: auto;
  right: var(--pos);
}

.eye::before {
  content: "";
  width: 45%;
  height: 50%;
  background: #fff;
  border-radius: 100%;
  top: 15%;
  left: 10%;
  transform: rotate(15deg);
  box-shadow: 0 0 3vmin 1.5vmin #000;
}

.mouth {
  width: 12%;
  height: 16%;
  border-radius: 100% 90% 110% 100%;
  top: 70%;
  left: 50%;
  transform: translate(-50%) rotate(3deg);
  border:0.6vmin solid;
  border-bottom-width: 0.9vmin;
  clip-path: polygon(-20% 40%, 120% 30%, 120% 120%, -20% 120%)
}

.nose {
  width: 15%;
  height: 11%;
  background:
    linear-gradient(#ff05, #0000, #d805)
    ;
  background-color: #fa0;
  border-radius: 150% 60% 60% 150% / 100%;
  left: 45%;
  top: 55%;
  transform: translate(-50%, 0);
  box-shadow: -0.0625vmin 0 0 0.7vmin
}

.nose::before,
.nose::after {
  content: "";
  width: 40%;
  height: 80%;
  border-radius: 100%;
  border-right: 0.5vmin solid darkorange;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}

.nose::after {
  width: 25%;
  height: 60%;
  left: 25%;
}

.cheek {
  width: 25%;
  height: 18%;
  background: red;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #f003, #0000);
  top: 65%;
  left: 12%;
}

.cheek + .cheek {
  left: auto;
  right: 12%;
}

.cheek::before,
.cheek::after {
  content: "";
  width: 30%;
  height: 35%;
  border-radius: 100%;
  border-top: 0.5vmin solid #f004;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%) rotate(-40deg);
}

.cheek::after {
  transform: translate(-10%, -35%) rotate(-20deg);
}

.arm {
  width: 40%;
  height: 20%;
  border-radius: 0% 50% 50% 50%;
  top: 30%;
  right: 5%;
  transform: translateX(100%) rotate(-25deg);
  box-shadow: 0 -2.5vmin 0 -1vmin
}

.arm::before,
.arm::after {
  content: "";
  width: 30%;
  height: 1.5vmin;
  background: black;
  border-radius: 0 100% 100% 0;
  right: -5%;
  top: -1.25vmin
}

.arm::after {
  transform-origin: left center;
  transform: rotate(-30deg);
  width: 25%;
  right: 5%;
}

.arm + .arm {
  left: 12%;
  top: 10%;
  border-radius: 15% 50% 50% 50%;
  transform: scaleX(-1) translateX(100%) rotate(-10deg) scaleY(-1);
}

.hat-base {
  width: 55%;
  height: 14%;
  background: #333;
  border-radius: 100% / 120% 120% 90% 90%;
  box-shadow:
    inset 2vmin -1.5vmin 4vmin 0.5vmin #fff5,
    inset -2vmin -1.5vmin 4vmin 0.5vmin #fff5,
    inset 0 0 5vmin 2vmin #000,
    inset 0 -2vmin 4vmin 1vmin #000,
    
    0 0.25vmin 0 1vmin
    ;
  left: 50%;
  transform: translateX(-50%);
  top: 18%;
}

.hat-top {
  width: 29%;
  height: 25%;
  background:
    radial-gradient(300% 50% at 50% 0, #000 18%, #0000 0),
    radial-gradient(200% 100% at 50% 0, #0000 0 80%, #000 0 82%, purple 0)
    ;
  background-color: #333;
  box-shadow:
    inset 0 1vmin 1vmin -1vmin #fff8,
    inset 1.5vmin 1.5vmin 3vmin 0.25vmin #fff5,
    inset -2vmin 1.5vmin 3vmin 0.25vmin #fff3,
    inset 0 0 5vmin 1vmin #0007,
    inset 0 -2vmin 4vmin 1vmin #0007,
    0 0.1vmin 0 1vmin
    ;
  border-radius: 100% / 10% 10% 10% 5%;
  left: 50%;
  top: 1%;
  transform: translate(-50%, 0);
  overflow: hidden;
}

.hat-top::before {
  content: "";
  width: 100%;
  height: 100%;
  background:
    radial-gradient(300% 50% at 50% 0, #0000 18%, #000 18.5% 24%, #0000 24.5%)
}

.shadow {
  width: 100%;
  height: 15%;
  background: #0001;
  border-radius: 50%;
  bottom: -6%;
  filter: blur(0.5vmin)
}

.hill {
  width: 200vmax;
  height: 100vmax;
  background: linear-gradient(aliceblue, #fff 25%);
  top: 75%;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 100% / 20%;
  border: 1.25vmin solid;
}


/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  top: 20px;
  right: 20px;
  background: red;
  border-radius: 50% / 11%;
  transition: transform 0.5s;
}

#youtube:hover,
#youtube:focus {
  transform: scale(1.1);
}

#youtube::before {
  content: "";
  display: block;
  position: absolute;
  top: 7.5%;
  left: -6%;
  width: 112%;
  height: 85%;
  background: red;
  border-radius: 9% / 50%;
}

#youtube::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 40px;
  width: 45px;
  height: 30px;
  border: 15px solid transparent;
  box-sizing: border-box;
  border-left: 30px solid white;
}

#youtube span {
  font-size: 0;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

Source et démonstration : https://codepen.io/alvaromontoro/pen/MWEOBPO