10 August 2022

Membuat Form Login Animasi Panda dengan HTML dan CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Membuat Form Cantik Animasi Panda dengan HTML dan CSS

LOGIN ANIMASI Form Login yang ada sekarang ini bentuk sepertinya itu-itu saja ya. Kalaupun ada animasinya, mungkin berkisar pada background gradient yang bisa berubah warna. Sepertinya sudah menjadi standar dan modifikasi yang masih terbilang simple. Tapi untuk tampilan secara keseluruhan, sudah memenuhi selera mata untuk memandang lama akan sebuah kreasi. Iya khan? :D

Dalam Form Login yang banyak terdapat pada website itu berfungsi sebagai masuknya member ke dalam menu yang ada di website tersebut. Misal kita mendaftarkan domain web kita ke penyedia layanan web hosting, kita diharuskan untuk Sign Up dulu dan mengisikan data penting yang sudah tertera disana dan setelah selesai barulah kita bisa masuk ke menu di dalamnya.

Kali ini saya akan membuat animasi Form Login, beda dari yang pernah saya buat yaitu di artikel Form Login Cantik Bergradient dengan Menggunakan Animasi CSS3. Kalau yang ini adalah backgroundnya berupa animasi warna yang dapat berganti. Seperti warna pelangi saya sebut begitu. Karena dari warna satu akan berpendar ke warna lainnya dan membentuk gradient warna yang unik.



Untuk tampilan sendiri dari Form Login ini adalah seekor hewan Panda yang berada di background Form Loginnya. Dalam menu yang harus diisikan disitu adalah menu Username dan Password. Baru setelah itu untuk klik Button Login. Menu-menu dalam Form Login ini wajib ada dan harus ada karena dari situlah seorang member akan mengisi data dan masuk ke databasenya.

Uniknya ketika kita menuliskan di menu Username, maka Panda ini akan mengelirikkan mata ke bawah melihat isian ketikan yang tengah kita lakukan untuk mengisi username tersebut. Dan ketika kita mengetikkan password di menu dibawahnya, si Panda ini akan menutup matanya seolah-olah dia tidak mau melihatnya karena memang hakikat Password adalah privasi dan tidak boleh dipertontonkan ke khalayak ramai. Unik ya pose dan gerakan panda ini.

Untuk tutorialnya saya berikan dibawah ini ya :

Membuat Form Cantik Animasi Panda dengan HTML dan CSS


1. Masuk ke Dashboard Blogger
2. Lalu pilih Tema
3. Klik Sesuaikan : Edit HTML
Setelah masuk ke template, kita lanjut ke langkah ke 4
4. Temukan kode ]]></b:skin> dan kemudian letakkan CSS dibawah ini tepat diatasnya
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #E9967A;
}
.container {
  height: 31.25em;
  width: 31.25em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
form {
  width: 23.75em;
  height: 18.75em;
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  top: calc(50% + 3.1em);
  left: 50%;
  padding: 0 3.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 2em;
}
form label {
  display: block;
  margin-bottom: 0.2em;
  font-weight: 600;
  color: #2e0d30;
}
form input {
  font-size: 0.95em;
  font-weight: 400;
  color: #3f3554;
  padding: 0.3em;
  border: none;
  border-bottom: 0.12em solid #3f3554;
  outline: none;
}
form input:focus {
  border-color: #f4c531;
}
form input:not(:last-child) {
  margin-bottom: 0.9em;
}
form button {
  font-size: 0.95em;
  padding: 0.8em 0;
  border-radius: 2em;
  border: none;
  outline: none;
  background-color: #E9967A;
  color: #2e0d30;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-top: 0.8em;
}
.panda-face {
  height: 7.5em;
  width: 8.4em;
  background-color: #ffffff;
  border: 0.18em solid #2e0d30;
  border-radius: 7.5em 7.5em 5.62em 5.62em;
  position: absolute;
  top: 2em;
  margin: auto;
  left: 0;
  right: 0;
}
.ear-l,
.ear-r {
  background-color: #2F4F4F;
  height: 2.5em;
  width: 2.81em;
  border: 0.18em solid #2e0d30;
  border-radius: 2.5em 2.5em 0 0;
  top: 1.75em;
  position: absolute;
}
.ear-l {
  transform: rotate(-38deg);
  left: 10.75em;
}
.ear-r {
  transform: rotate(38deg);
  right: 10.75em;
}
.blush-l,
.blush-r {
  background-color: #ff8bb1;
  height: 1em;
  width: 1.37em;
  border-radius: 50%;
  position: absolute;
  top: 4em;
}
.blush-l {
  transform: rotate(25deg);
  left: 1em;
}
.blush-r {
  transform: rotate(-25deg);
  right: 1em;
}
.eye-l,
.eye-r {
  background-color: #3f3554;
  height: 2.18em;
  width: 2em;
  border-radius: 2em;
  position: absolute;
  top: 2.18em;
}
.eye-l {
  left: 1.37em;
  transform: rotate(-20deg);
}
.eye-r {
  right: 1.37em;
  transform: rotate(20deg);
}
.eyeball-l,
.eyeball-r {
  height: 0.6em;
  width: 0.6em;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 0.6em;
  top: 0.6em;
  transition: 1s all;
}
.eyeball-l {
  transform: rotate(20deg);
}
.eyeball-r {
  transform: rotate(-20deg);
}
.nose {
  height: 1em;
  width: 1em;
  background-color: #3f3554;
  position: absolute;
  top: 4.37em;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 1.2em 0 0 0.25em;
  transform: rotate(45deg);
}
.nose:before {
  content: "";
  position: absolute;
  background-color: #3f3554;
  height: 0.6em;
  width: 0.1em;
  transform: rotate(-45deg);
  top: 0.75em;
  left: 1em;
}
.mouth,
.mouth:before {
  height: 0.75em;
  width: 0.93em;
  background-color: transparent;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0.18em #3f3554;
}
.mouth {
  top: 5.31em;
  left: 3.12em;
}
.mouth:before {
  content: "";
  position: absolute;
  left: 0.87em;
}
.hand-l,
.hand-r {
  background-color: #2F4F4F;
  height: 2.81em;
  width: 2.5em;
  border: 0.18em solid #2e0d30;
  border-radius: 0.6em 0.6em 2.18em 2.18em;
  transition: 1s all;
  position: absolute;
  top: 8.4em;
}
.hand-l {
  left: 7.5em;
}
.hand-r {
  right: 7.5em;
}
.paw-l,
.paw-r {
  background-color: #2F4F4F;
  height: 3.12em;
  width: 3.12em;
  border: 0.18em solid #2e0d30;
  border-radius: 2.5em 2.5em 1.2em 1.2em;
  position: absolute;
  top: 26.56em;
}
.paw-l {
  left: 10em;
}
.paw-r {
  right: 10em;
}
.paw-l:before,
.paw-r:before {
  position: absolute;
  content: "";
  background-color: #ffffff;
  height: 1.37em;
  width: 1.75em;
  top: 1.12em;
  left: 0.55em;
  border-radius: 1.56em 1.56em 0.6em 0.6em;
}
.paw-l:after,
.paw-r:after {
  position: absolute;
  content: "";
  background-color: #ffffff;
  height: 0.5em;
  width: 0.5em;
  border-radius: 50%;
  top: 0.31em;
  left: 1.12em;
  box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff;
}
@media screen and (max-width: 500px) {
  .container {
    font-size: 14px;
  }
}


Langkah selanjutnya adalah masuk ke Tata Letak, Tambah HTML/Javascript dan templelkan HTML ini di situ
<div class="container">
      <form>
      <label for="username">Username:</label>
      <input type="text" id="username" placeholder="Username isi disini ..." />
      <label for="password">Password:</label>
      <input type="password" id="password" placeholder="Password isi disini ..." />
      <button>Login</button>
      </form>
      <div class="ear-l"></div>
      <div class="ear-r"></div>
      <div class="panda-face">
      <div class="blush-l"></div>
      <div class="blush-r"></div>
      <div class="eye-l">
      <div class="eyeball-l"></div>
      </div>
      <div class="eye-r">
      <div class="eyeball-r"></div>
      </div>
      <div class="nose"></div>
      <div class="mouth"></div>
      </div>
      <div class="hand-l"></div>
      <div class="hand-r"></div>
      <div class="paw-l"></div>
      <div class="paw-r"></div>
</div>


Dan terakhir tempelkan javascript dibawah ini atas kode </body>. Ini letaknya di template ya teman-teman.
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/form-login-panda.js"/>


Terakhir save semua dan lihat di tampilan blog kalian pasti ada itu Form Login dengan animasi Panda. Keren khan. Tapi sama seperti yang saya buat dulu ini hanya display saja ya. Belum masih ke databasenya, kalau kalian mau silakan diutak-atik sendiri. Sekian dan terima kasih ya. Salam Blogger. Oh iya untuk hasilnya saya berikan contoh dibawah ini.



Bagikan ke teman-teman kamu
Label Postingan : CSS , Javascript

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Form Login Animasi Panda dengan HTML dan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

1 comment

  1. Bagus masbro artikelnya tambahin lagi artikelnya yang lain ..

    ReplyDelete

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon