Jadual Kandungan
Contoh
Neumorphism UI - Form Animation
Neumorphic Login Form
Contact Us
Subscribe to Newsletter
Kesimpulan
Rumah hujung hadapan web tutorial css Borang UI homomorfik

Borang UI homomorfik

Aug 26, 2023 pm 11:49 PM

Borang UI homomorfik

NeumorphismUI ialah trend reka bentuk popular terkini yang menggabungkan skeuomorphism dengan gaya moden.

NeumorphismUI ialah gaya reka bentuk yang patut dipertimbangkan apabila digunakan pada borang. Ia boleh menjadikan antara muka pengguna berasa lebih ketara dan interaktif, akhirnya meningkatkan kebolehgunaan keseluruhan borang.

Dalam artikel ini, kami akan meneroka pelbagai jenis bentuk NeumorphismUI dan memberikan contoh serta amalan terbaik untuk setiap satu.

Contoh

Dalam contoh ini, kami mencipta borang log masuk untuk meningkatkan pengalaman yang dipertingkatkan. Mula-mula, kami bermula dengan mereka bentuk bentuk dalam gaya bukan skeuomorphic, memberikan rupa moden dan elegan. Kami menambah kesan bayangan halus untuk mencipta ilusi kedalaman dan dimensi, menjadikannya menonjol dari latar belakang.

Pengguna boleh memasukkan nama pengguna dan kata laluan mereka dalam medan input, dan apabila menuding tetikus di atas setiap medan input, medan tersebut akan kelihatan dinaikkan dengan kesan bayang-bayang.

Dalam output, pengguna melihat bahawa borang log masuk menarik secara visual, berfungsi dan mesra pengguna.

index.html

<html>
<head> 
   <title>Neumorphic Login Form</title> 
   <style>
      @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"); 
      * {  
         box-sizing: border-box; 
         margin: 0; 
         padding: 0; 
      } 
      body { 
         font-family: 'Lato', sans-serif; 
         display: flex; 
         align-items: center; 
         justify-content: center; 
         flex-direction: column;
         width: 100%; 
         height: 100vh;
         background-color: #e6e6e6; 
      }  
      .container { 
         background-color: #e6e6e6; 
         border-radius: 20px; 
         box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7; 
         padding: 30px; 
      } 
      h1 { 
         text-align: center; 
         margin-bottom: 30px; 
         font-size 2rem; 
      } 
      h2{ 
         margin-bottom: 2rem; 
         color: #333; 
      } 
      form { 
         display: flex; 
         flex-direction: column;  
      }  
      .input-container { 
         position: relative; 
         margin-bottom: 20px; 
      }  
      input { 
         width:100%;
         background-color: #e6e6e6; 
         border: none; 
         border-radius: 10px; 
         box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7; 
         padding: 15px 20px; 
         font-size 1rem; 
         transition: box-shadow 0.2s ease; 
      } 
      input:focus { 
         outline: none; 
         box-shadow: inset -5px -5px 10px #b7b7b7, inset 5px 5px 10px #ffffff; 
      } 
      i {
         position: absolute; 
         top: 50%; 
         transform: translateY(-50%); 
         right: 20px; 
         color: #b7b7b7; 
         transition: transform 0.2s ease, color 0.2s ease; 
      }  
      input:focus + i { 
         transform: translateY(-50%) translateX(10px); 
         color: #777777;  
      } 
      button { 
         background-color: #ff7f50; 
         border: none;  
         border-radius: 10px; 
         color: #ffffff;  
         font-size: 1.2rem; 
         padding: 15px;  
         margin-top: 20px; 
         cursor: pointer;  
         transition: box-shadow 0.2s ease;  
      }  
      button:hover {  
         box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7; 
      } 
   </style>
</head> 
<body> 
   <h2 id="Neumorphism-UI-Form-Animation">Neumorphism UI - Form Animation </h2> 
   <div class="container"> 
      <h1 id="Neumorphic-Login-Form">Neumorphic Login Form</h1> 
      <form> 
         <div class = "input-container"> 
            <input type = "text" placeholder = "Username" required> 
            <i class="fas fa-user"></i> 
         </div> 
         <div class = "input-container"> 
            <input type = "password" placeholder = "Password" required>  
            <i class="fas fa-lock"></i> 
         </div> 
         <button type = "submit"> Sign in </button> 
      </form> 
   </div> 
</body> 
</html>
Salin selepas log masuk

Contoh

Dalam contoh ini, kami mencipta bentuk NeumorphismUI kecerunan. Borang ini termasuk medan input teks untuk e-mel pengguna, mesej dan butang hantar. Gaya CSS termasuk latar belakang kecerunan, bentuk bulat lembut dan bayang-bayang halus untuk mencipta kesan NeumorphismUI.

index.html

<html>
<head>
   <title> Gradient Form</title>
   <style>
      body {
         font-family: 'Lato', sans-serif;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         width: 100%;
         height: 100vh;
         background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
      }
      .neumorphism-form {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 2rem;
         border-radius: 1rem;
      }
      .gradient {
         background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1);
      }
      .neumorphism-form h2 {
         color: #fff;
         font-size: 2rem;
         margin-bottom: 1rem;
      }
      .neumorphism-form label {
         font-size: 1.2rem;
         margin-bottom: 0.5rem;
      }
      .message,
      .neumorphism-form input {
         padding: 0.5rem;
         border: none;
         border-radius: 0.5rem;
         background-color: #f7f7f7;
         box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.5),
         inset -4px -4px 8px rgba(0, 0, 0, 0.1);
         margin-bottom: 1rem;
         width: 100%;
      }
      .neumorphism-form button {
         background-color: #3f6bfe;
         color: #fff;
         border: none;
         border-radius: 0.5rem;
         padding: 0.5rem 1rem;
         font-size: 1.2rem;
         box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5),
         -4px -4px 8px rgba(255, 255, 255, 0.2);
         cursor: pointer;
      }
      .neumorphism-form button:hover {
         transform: translateY(-2px);
         box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.5),
         -2px -2px 4px rgba(255, 255, 255, 0.2);
      }
   </style>
</head>
<body>
   <form class = "neumorphism-form gradient">
      <h2 id="Contact-Us"> Contact Us </h2>
      <input type = "email" id = "email" name = "email" placeholder = "Email">
      <textarea class = "message" id =" " cols = "30" rows = "10" placeholder = "Write Your Message..."> </textarea>
      <button type = "submit"> Submit </button>
   </form>
</body>
</html>
Salin selepas log masuk

Contoh

Dalam contoh ini, kami mencipta borang UI Neumorphism mod gelap yang membolehkan pengguna melanggan surat berita. Selepas itu, kami menambah warna latar belakang kecerunan linear pada badan dan memberikan bentuk bayangan kotak dengan nilai negatif dan positif untuk mencipta kesan homomorfik.

Dalam output, pengguna boleh memerhati bentuk mod gelap dengan kesan homomorfik, di mana unsur bentuk kelihatan dinaikkan sedikit dari latar belakang.

Index.html -

<html>
<head>
   <title> Dark Mode Form</title>
   <style>
      body {
         font-family: "Lato", sans-serif;
            display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         width: 100%;
         height: 100vh;
         background: linear-gradient(150deg, #333, #111);
      }
      .neumorphism-form {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 2rem;
         border-radius: 1rem;
      }
      .dark-mode {
         box-shadow: -4px -4px 4px rgba(255, 255, 255, 0.08),
         4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(255, 255, 255, 0.08) inset,
         0 0 0 rgba(0, 0, 0, 0.56) inset;
         border: 1px solid rgba(0, 0, 0, 0.08);
      }
      .neumorphism-form h2 {
         font-size: 1.5rem;
         margin-bottom: 1.5rem;
         color: #64dd178f;
      }
      .neumorphism-form input[type="email"] {
         padding: 0.5rem;
         background-color: transparent;
         box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.08),
         2px 2px 2px rgba(0, 0, 0, 0.56),
         -2px -2px 2px rgba(255, 255, 255, 0.08) inset,
         2px 2px 2px rgba(0, 0, 0, 0.56) inset;
         border: 1px solid rgba(0, 0, 0, 0.08);
         margin-bottom: 1rem;
         width: 100%;
            color: #ffff;
      }
      .neumorphism-form button {
            background-color: transparent;
            color: #ff40408f;
            border-radius: 0.5rem;
         padding: 0.5rem 1rem;
         font-size: 1.2rem;
         box-shadow: -2px -2px 4px rgba(100, 221, 23, 0.12),
         4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(100, 221, 23, 0.12) inset,
         0 0 0 rgba(0, 0, 0, 0.56) inset;
         border: 1px solid rgba(0, 0, 0, 0.08);
         cursor: pointer;
      }
      .neumorphism-form button:hover {
         transform: translateY(-2px);
         border: solid 1px #64dd178f;
      }
   </style>
</head> 
<body>
   <form class = "neumorphism-form dark-mode"> 
      <h2 id="Subscribe-to-Newsletter"> Subscribe to Newsletter </h2>
      <input type = "email" id = "email" name = "email" placeholder = "Enter your email">
      <button type = "submit"> Subscribe </button>
   </form>
</body>
</html>
Salin selepas log masuk

Kesimpulan

Pengguna telah mempelajari cara menggunakan neumorphismUI untuk mencipta bentuk yang menarik secara visual seperti bentuk kecerunan, bentuk mod gelap dan bentuk ringkas. Mereka juga belajar cara menggunakan CSS untuk mencipta reka bentuk homomorfik yang memberikan bentuk rupa moden dan tulen.

Atas ialah kandungan terperinci Borang UI homomorfik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Mar 02, 2025 am 09:03 AM

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

Bekerja dengan Caching Graphql

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Mar 08, 2025 am 09:45 AM

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres Muat naik fail dengan multer di node.js dan ekspres Mar 02, 2025 am 09:15 AM

Muat naik fail dengan multer di node.js dan ekspres

See all articles