Glassmorphism Login Form Html Css | Login Form Html

-

 Glassmorphism Login Form Html Css | Login Form Html


selamat datang blog saya. Di blog ini, kita akan membahas  cara membuat Form Login Glassmorphism. Kami akan menggunakan HTML & CSS untuk Form Login Glassmorphism ini. Semoga Anda menikmati blog kami, jadi mari kita mulai dengan struktur HTML dasar untuk Formulir Login Glassmorphism.


Kode HTML untuk Formulir Login Glassmorphism

<section>  
      <div class="colour"></div>  
      <div class="colour"></div>  
      <div class="colour"></div>  
      <div class="box">  
           <div class="square" style="--i:0;"></div>  
           <div class="square" style="--i:1;"></div>  
           <div class="square" style="--i:2;"></div>  
           <div class="square" style="--i:3;"></div>  
           <div class="square" style="--i:4;"></div>  
           <div class="container">  
                <div class="form">  
                     <h2>Login Form</h2>  
                     <form>  
                          <div class="input__box">  
                               <input type="text" placeholder="Username">  
                          </div>  
                          <div class="input__box">  
                               <input type="password" placeholder="Password">  
                          </div>  
                          <div class="input__box">  
                               <input type="submit" value="Login">  
                          </div>  
                          <p class="forget">Forgot Password? <a href="#">Click Here</a></p>  
                          <p class="forget">Don't have an account? <a href="#">Sign Up</a></p>  
                     </form>  
                </div>  
           </div>  
      </div>  
 </section>

Ada semua kode HTML untuk Formulir Login Glassmorphism. Sekarang, Anda dapat melihat output tanpa CSS, lalu kita menulis CSS untuk Form Login Glassmorphism kita .
Keluaran


CSS untuk Formulir Masuk Glassmorphism
{  
      margin: 0;  
      padding: 0;  
      box-sizing: border-box;  
      font-family: "Poppins", sans-serif;  
 }  
 body {  
      overflow: hidden;  
 }  
 section {  
      display: flex;  
      min-height: 100vh;  
      align-items: center;  
      justify-content: center;  
      background: linear-gradient(to bottom, #f7f7fe, #dff1ff);  
 }  
 section .colour {  
      position: absolute;  
      filter: blur(150px);  
 }  
 section .colour:nth-child(1) {  
      top: -350px;  
      width: 600px;  
      height: 600px;  
      background: #bf4ad4;  
 }  
 section .colour:nth-child(2) {  
      left: 100px;  
      width: 500px;  
      height: 500px;  
      bottom: -150px;  
      background: #ffa500;  
 }  
 section .colour:nth-child(3) {  
      right: 100px;  
      bottom: 50px;  
      width: 300px;  
      height: 300px;  
      background: #2b67f3;  
 }  
 .box {  
      position: relative;  
 }  
 .box .square {  
      position: absolute;  
      border-radius: 10px;  
      backdrop-filter: blur(5px);  
      background: rgba(255, 255, 255, 0.1);  
      animation-delay: calc(-1s * var(--i));  
      animation: animate 10s linear infinite;  
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);  
      border: 1px solid rgba(255, 255, 255, 0.5);  
      border-right: 1px solid rgba(255, 255, 255, 0.2);  
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
 }  
 @keyframes animate {  
      0%,  
      100% {  
           transform: translateY(-40px);  
      }  
      50% {  
           transform: translateY(40px);  
      }  
 }  
 .box .square:nth-child(1) {  
      top: -50px;  
      left: -60px;  
      width: 100px;  
      height: 100px;  
 }  
 .box .square:nth-child(2) {  
      z-index: 2;  
      top: 150px;  
      left: -100px;  
      width: 120px;  
      height: 120px;  
 }  
 .box .square:nth-child(3) {  
      z-index: 2;  
      width: 80px;  
      height: 80px;  
      right: -50px;  
      bottom: -60px;  
 }  
 .box .square:nth-child(4) {  
      left: 100px;  
      width: 50px;  
      height: 50px;  
      bottom: -80px;  
 }  
 .box .square:nth-child(5) {  
      top: -80px;  
      left: 140px;  
      width: 60px;  
      height: 60px;  
 }  
 .container {  
      width: 400px;  
      display: flex;  
      min-height: 400px;  
      position: relative;  
      border-radius: 10px;  
      align-items: center;  
      justify-content: center;  
      backdrop-filter: blur(5px);  
      background: rgba(255, 255, 255, 0.1);  
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);  
      border: 1px solid rgba(255, 255, 255, 0.5);  
      border-right: 1px solid rgba(255, 255, 255, 0.2);  
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
 }  
 .form {  
      width: 100%;  
      height: 100%;  
      padding: 40px;  
      position: relative;  
 }  
 .form h2 {  
      color: #fff;  
      font-size: 24px;  
      font-weight: 600;  
      position: relative;  
      letter-spacing: 1px;  
      margin-bottom: 40px;  
 }  
 .form h2::before {  
      left: 0;  
      width: 80px;  
      height: 4px;  
      content: "";  
      bottom: -10px;  
      background: #fff;  
      position: absolute;  
 }  
 .form .input__box {  
      width: 100%;  
      margin-top: 20px;  
 }  
 .form .input__box input {  
      width: 100%;  
      color: #fff;  
      border: none;  
      outline: none;  
      font-size: 16px;  
      padding: 10px 20px;  
      letter-spacing: 1px;  
      border-radius: 35px;  
      background: rgba(255, 255, 255, 0.2);  
      border: 1px solid rgba(255, 255, 255, 0.5);  
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  
      border-right: 1px solid rgba(255, 255, 255, 0.2);  
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
 }  
 .form::placeholder {  
      color: #fff;  
 }  
 .form .input__box input[type="submit"] {  
      color: #666;  
      cursor: pointer;  
      background: #fff;  
      max-width: 100px;  
      font-weight: 600;  
      margin-bottom: 20px;  
 }  
 .forget {  
      color: #fff;  
      margin-top: 5px;  
 }  
 .forget a {  
      color: #fff;  
      font-weight: 600;  
      text-decoration: none;  
 }  
Sekarang kami telah menyelesaikan bagian CSS kami, Ini adalah CSS keluaran kami yang diperbarui.




Komentar

Posting Komentar

Postingan populer dari blog ini

Program Python untuk Menghitung Luas Lingkaran

-
Gambar
 Program Python untuk Menghitung Luas Lingkaran Python adalah salah satu bahasa pemrograman yang populer dan banyak digunakan oleh para pengembang perangkat lunak. Pada artikel kali ini, kami akan membagikan contoh kode Python sederhana yang dapat digunakan untuk menghitung luas lingkaran berdasarkan jari-jari yang dimasukkan oleh pengguna. Program yang kami buat menggunakan modul math untuk mengakses nilai pi. Pengguna hanya perlu memasukkan nilai jari-jari lingkaran saat diminta, dan program akan menghitung luas lingkaran secara otomatis. Berikut adalah contoh kode Python untuk menghitung luas lingkaran import math radius = float ( input ( "Masukkan jari-jari lingkaran: " )) area = math . pi * radius * radius print ( "Luas lingkaran adalah: " , area ) Setelah program dijalankan, pengguna akan melihat hasil perhitungan luas lingkaran pada layar. Program ini sangat sederhana dan dapat diubah atau disesuaikan sesuai dengan kebutuhan pengguna. Semoga contoh k...
Read more »

Program Python untuk menghitung rata-rata dari beberapa angka yang dimasukkan oleh pengguna

-
Gambar
  Program Python untuk menghitung rata-rata dari beberapa angka yang dimasukkan oleh pengguna. Berikut ini adalah contoh kode Python yang bisa digunakan untuk menghitung rata-rata dari beberapa angka yang dimasukkan oleh pengguna melalui program. Program ini dapat sangat berguna dalam situasi di mana Anda perlu menghitung rata-rata dari sejumlah angka yang diberikan. n = int ( input ( "Masukkan banyak angka: " )) Pertama, program akan meminta pengguna untuk memasukkan banyak angka yang akan dihitung rata-ratanya. Kemudian, program akan meminta pengguna untuk memasukkan angka-angka tersebut satu per satu. angka = [] for i in range ( n ):     angka . append ( float ( input ( "Masukkan angka ke- %d : " % ( i + 1 )))) rata_rata = sum ( angka ) / n print ( "Rata-rata dari angka yang dimasukkan adalah:" , rata_rata )  Setelah itu, program akan menghitung rata-rata dari angka-angka tersebut dan menampilkan hasilnya. Program ini relatif sederhana dan mud...
Read more »

Program Python tentang lagu anak ayam.

-
Gambar
Program Python tentang lagu anak ayam.  Nah saya disini akan membuat program python tentang lagu anak ayam. nah disini kalian harus mempunyai visual studio atau  compiler . ok mari kita lanjut di bagian mengodingnya. Kode Python tentang lagu anak ayam n = int ( input ( "masukkan jumlah anak ayam: " )) if n >= 2 :     while n > 1 :         print ( 'anak ayam turun %d mati 1 tinggal %d ' %( n , n - 1 ))         n = n - 1 else :     print ( 'anak ayam turun %d mati 1 tinggal induknya' % (n) ) Anda dapat melihat output atau keluaran sebagai berikut dan jika anda memasukkan jumlah anak ayam 5 maka output yang dihasilkan akan seperti berikut Sampai disini dulu pembahasan mengenai program python dan terima kasih sudah meluangkan waktu untuk membaca artikel ini  dan sampai jumpa di artikel selajutnya :)
Read more »