Cara Membuat Manusia Salju Atau Snowman Menggunakan CSS

Sharing Teknologi – Cara Membuat Manusia Salju Atau Snowman Menggunakan CSS. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Manusia Salju Atau Snowman dengan hanya bermodal CSS.

Yap.. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress. 

Dengan hanya bermodal style CSS bisa membuat website lebih menarik. Selain itu untuk membuatnya juga cukup mudah.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Cara Membuat Manusia Salju Atau Snowman Menggunakan CSS. 

Berikut Panduan Membuat Manusia Salju Atau Snowman Menggunakan CSS. 

Cara Membuat Manusia Salju

Silakan Copas kode HTML dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode agar lebih mudah untuk dipasang dimanapun. Silakan nanti bisa disesuaikan dengan kebutuhan yang dipasang atau diletakkan di functions.php.

function snow_man() {
ob_start(); ?>
<div class="canvas-frame">
    <div class="canvasframe">
      <div class="hill"></div>
      <div class="shadowframe"></div>
      <div class="bodyframe">
        <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>
</div>
<style>
.canvas-frame {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#adf, #ddd);
  position: relative;
}
.canvasframe {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.canvasframe .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
    ;
}

.canvasframe .bodyframe {
  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
    ;
}

.canvasframe .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%);
}

.canvasframe .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;
}

.canvasframe .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%)
}

.canvasframe .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%);
}

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

.canvasframe .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;
}

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

.canvasframe .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;
}

.canvasframe .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%)
}

.canvasframe .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
}

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

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

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

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

.canvasframe .cheek::before,
.canvasframe .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);
}

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

.canvasframe .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
}

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

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

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

.canvasframe .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%;
}

.canvasframe .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;
}

.canvasframe .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%)
}

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

.canvasframe .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;
}

</style>
<?php return ob_get_clean();
}
add_shortcode('snowman', 'snow_man');

Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.

[*snowman*] //hilangkan tanda bintang

Namun jika berupa tag HTML atau php maka bisa menggunakan dibawah ini

<?php echo do_shortcode('[*snowman*]') ;?> //hilangkan tanda bintang

Tampilannya kurang lebih bisa dilihat dibawah ini

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.