Halo teman-teman! Dalam artikel ini, kita akan belajar cara membuat Neomorphism Login Form menggunakan HTML dan CSS. Jika kamu ingin membuat tampilan login yang modern dan elegan, tutorial ini cocok untukmu!
Sebelumnya, saya juga telah membagikan tutorial tentang cara membuat Sign-in Form sederhana, dan kali ini kita akan membahas teknik Neomorphism Login Form yang sedang populer. Jika kamu menyukai artikel ini, jangan lupa untuk subscribe rebelsec.id agar tidak ketinggalan tutorial terbaru!
Apa Itu Neomorphism (Soft UI)?
Neomorphism, atau Soft UI, adalah gaya desain yang menggabungkan warna latar belakang, bentuk, gradasi, highlight, dan bayangan untuk menciptakan tampilan yang tampak lembut, menonjol, dan hampir 3D.
Neomorphism merupakan kombinasi dari teknik Skeuomorphism, Realism, dan Flat Design untuk menciptakan tampilan yang elegan dan modern.
Apa Itu box-shadow dalam CSS?
box-shadow adalah properti dalam CSS yang digunakan untuk memberikan efek bayangan pada elemen. Dalam desain Neomorphism, kita menggunakan dua efek box-shadow:
- Bayangan terang untuk efek timbul.
- Bayangan gelap untuk efek cekungan.
💻 Source Code: HTML & CSS
Jika kamu menyukai desain Neomorphism Login Form ini, silakan gunakan dalam proyekmu.
✅ Langkah-langkahnya:
1️⃣ Buat file index.html dan tambahkan kode berikut:
a
<span style="font-family: verdana, geneva, sans-serif;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form | By Rebelsec.id</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-box">
<img src="logo.png" />
<h2>Member Login</h2>
<form>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button>Sign In</button>
</form>
<br />
<a href="#">Forgot Password?</a>
</div>
</body>
</html></span>
2️⃣ Buat file style.css dan tambahkan kode berikut:
body {
background: rgb(214, 214, 214);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.login-box {
width: 350px;
height: 400px;
background: rgb(214, 214, 214);
margin: 150px auto;
border-radius: 10px;
box-shadow: 5px 5px 10px #b6a9a9, -5px -5px 10px #ffffff;
}
img {
width: 110px;
height: 110px;
position: relative;
top: -50px;
left: 35%;
}
h2 {
margin: -25px 0 20px 0;
text-align: center;
color: #8f8888;
}
form {
margin-left: 40px;
}
input {
display: block;
width: 80%;
margin-bottom: 20px;
padding: 10px;
border: none;
outline: none;
font-family: sans-serif;
background: transparent;
font-size: 16px;
border-radius: 25px;
text-shadow: 1px 1px 0 #fff;
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
}
button {
width: 87%;
border: none;
height: 35px;
border-radius: 25px;
background: rgb(82, 182, 221);
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: -5px -5px 20px rgb(224, 217, 217), 5px 5px 20px #babecc;
outline: none;
}
input:focus {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
button:active {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
a {
margin-left: 32%;
color: #8f8888;
font-size: 16px;
text-decoration: none;
}
🔹 Kesimpulan
Kita telah berhasil membuat Neomorphism Login Form menggunakan HTML dan CSS dengan tampilan Soft UI yang modern dan elegan.
📌 Fitur yang telah kita buat:
✅ Tampilan Neomorphism (Soft UI) dengan efek 3D
✅ Input form dengan efek cekungan
✅ Tombol login dengan efek menonjol
✅ Responsif dan mudah dimodifikasi
Jangan lupa untuk membagikan artikel ini jika kamu merasa bermanfaat! 🚀
Posting Komentar