Maison > Article > interface Web > Formulaire d'interface utilisateur homomorphe
Formulaire d'interface utilisateur homomorphe
- WBOYavant
- 2023-08-26 23:49:08783parcourir
NeumorphismUI est une tendance de design populaire récente qui combine le skeuomorphisme et le style moderne.
NeumorphismUI est un style de conception qui mérite d'être pris en compte lorsqu'il est appliqué aux formulaires. Cela peut rendre l’interface utilisateur plus tangible et interactive, améliorant ainsi la convivialité globale du formulaire.
Dans cet article, nous explorerons les différents types de formulaires NeumorphismUI et fournirons des exemples et des bonnes pratiques pour chacun.
Exemple
Dans cet exemple, nous avons créé un formulaire de connexion pour améliorer l'expérience améliorée. Tout d’abord, nous avons commencé par concevoir la forme dans un style non skeuomorphique, lui donnant un look moderne et élégant. Nous avons ajouté des effets d'ombre subtils pour créer l'illusion de profondeur et de dimension, le faisant ressortir de l'arrière-plan.
Les utilisateurs peuvent saisir leur nom d'utilisateur et leur mot de passe dans les champs de saisie, et lorsque vous passez la souris sur chaque champ de saisie, le champ apparaîtra en relief avec un effet d'ombre.
Dans le résultat, les utilisateurs voient que le formulaire de connexion est visuellement attrayant, fonctionnel et convivial.
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>Neumorphism UI - Form Animation </h2>
<div class="container">
<h1>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>
Exemple
Dans cet exemple, nous créons un formulaire NeumorphismUI dégradé. Le formulaire comprend un champ de saisie de texte pour l'e-mail, le message de l'utilisateur et un bouton d'envoi. Les styles CSS incluent des arrière-plans dégradés, des formes arrondies douces et des ombres subtiles pour créer un effet 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> 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>
Exemple
Dans cet exemple, nous créons un formulaire d'interface utilisateur de neumorphisme en mode sombre qui permet aux utilisateurs de s'abonner à la newsletter. Après cela, nous avons ajouté une couleur d'arrière-plan dégradé linéaire au corps et donné au formulaire une ombre de boîte avec des valeurs négatives et positives pour créer un effet homomorphe.
Dans la sortie, les utilisateurs peuvent observer un formulaire en mode sombre avec un effet homomorphe, où les éléments du formulaire semblent légèrement surélevés par rapport à l'arrière-plan.
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> Subscribe to Newsletter </h2>
<input type = "email" id = "email" name = "email" placeholder = "Enter your email">
<button type = "submit"> Subscribe </button>
</form>
</body>
</html>
Conclusion
Les utilisateurs ont appris à utiliser neumorphismUI pour créer des formulaires visuellement attrayants tels que des formulaires dégradés, des formulaires en mode sombre et des formulaires simples. Ils ont également appris à utiliser CSS pour créer des conceptions homomorphes qui donnent aux formulaires un aspect moderne et authentique.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!