agung wisudhatama August 10, 2022 1 Komentar

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

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.

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.

Demo

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.