Accueil
code source
tutoriels

Une page de connexion en style neumorphic

Coding Team

Bonjour lecteurs, Aujourd'hui, dans ce blog, vous apprendrez comment créer une conception de formulaire de connexion de neumorphisme en HTML et CSS. Plus tôt, j'ai partagé une conception de formulaire de connexion de bordure d'entrées lumineuses animées en utilisant uniquement HTML et CSS, il est maintenant temps de créer une conception d'interface utilisateur de formulaire de connexion de neumorphisme en HTML et CSS.

L'effet Néomorphisme est un mélange de la fameuse interface utilisateur plate actuelle et des anciens principes skeuomorphes ! Les pièces ont une ombre de boîte foncée en bas et une ombre de boîte claire en haut ; la combinaison des deux crée l'effet des éléments se poussant à travers votre écran.

Comme vous pouvez le voir sur l'image, il s'agit d'un formulaire de connexion Light Neumorphism créé en utilisant uniquement HTML et CSS. Fondamentalement, dans notre connexion Light Neumorphism, il y a des icônes comme l'utilisateur et le mot de passe. Ce formulaire de connexion est créé uniquement à des fins de conception.

Si vous aimez ce programme (Neumorphism Login Form UI Design) et que vous souhaitez obtenir les codes sources. Vous pouvez facilement obtenir les codes sources de ce programme. Pour obtenir les codes sources, il vous suffit de faire défiler vers le bas.

Si vous êtes débutant et que vous avez des connaissances de base sur HTML et CSS uniquement, vous pouvez également créer ce type de formulaire de connexion sans fonction ni action.

Formulaire de connexion au neumorphisme en HTML et CSS [Codes sources]

Pour créer cette conception de formulaire de connexion de neumorphisme. Tout d'abord, vous devez créer deux fichiers, un fichier HTML et un autre fichier CSS. Après avoir créé ces fichiers, collez simplement les codes suivants dans votre fichier. Tout d'abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N'oubliez pas que vous devez créer un fichier avec l'extension .html.

<!DOCTYPE html>
<!-- Creer par Coding Team -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <title>Neumorphism Login Form UI | Coding Team</title> -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="content">
<div class="text">
Login Form
</div>
<form action="#">
<div class="field">
<input type="text" required>
<span class="fas fa-user"></span>
<label>Email or Phone</label>
</div>
<div class="field">
<input type="password" required>
<span class="fas fa-lock"></span>
<label>Password</label>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<button>Sign in</button>
<div class="sign-up">
Not a member?
<a href="#">signup now</a>
</div>
</form>
</div>
</body>

</html>

Deuxièmement, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N'oubliez pas que vous devez créer un fichier avec l'extension .css.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
/* user-select: none; */
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #dde1e7;
text-align: center;
}
.content{
width: 330px;
padding: 40px 30px;
background: #dde1e7;
border-radius: 10px;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94,104,121,0.288);
}
.content .text{
font-size: 33px;
font-weight: 600;
margin-bottom: 35px;
color: #595959;
}
.field{
height: 50px;
width: 100%;
display: flex;
position: relative;
}
.field:nth-child(2){
margin-top: 20px;
}
.field input{
height: 100%;
width: 100%;
padding-left: 45px;
outline: none;
border: none;
font-size: 18px;
background: #dde1e7;
color: #595959;
border-radius: 25px;
box-shadow: inset 2px 2px 5px #BABECC,
inset -5px -5px 10px #ffffff73;
}
.field input:focus{
box-shadow: inset 1px 1px 2px #BABECC,
inset -1px -1px 2px #ffffff73;
}
.field span{
position: absolute;
color: #595959;
width: 50px;
line-height: 50px;
}
.field label{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 45px;
pointer-events: none;
color: #666666;
}
.field input:valid ~ label{
opacity: 0;
}
.forgot-pass{
text-align: left;
margin: 10px 0 10px 5px;
}
.forgot-pass a{
font-size: 16px;
color: #3498db;
text-decoration: none;
}
.forgot-pass:hover a{
text-decoration: underline;
}
button{
margin: 15px 0;
width: 100%;
height: 50px;
font-size: 18px;
line-height: 50px;
font-weight: 600;
background: #dde1e7;
border-radius: 25px;
border: none;
outline: none;
cursor: pointer;
color: #595959;
box-shadow: 2px 2px 5px #BABECC,
-5px -5px 10px #ffffff73;
}
button:focus{
color: #3498db;
box-shadow: inset 2px 2px 5px #BABECC,
inset -5px -5px 10px #ffffff73;
}
.sign-up{
margin: 10px 0;
color: #595959;
font-size: 16px;
}
.sign-up a{
color: #3498db;
text-decoration: none;
}
.sign-up a:hover{
text-decoration: underline;
}

C'est tout, maintenant vous avez créé avec succès une conception d'interface utilisateur de formulaire de connexion de neumorphisme en utilisant HTML et CSS. Si votre code ne fonctionne pas ou si vous avez rencontré une erreur/un problème, veuillez commenter ou nous contacter à partir de la page de contact.

Enregistrer un commentaire

N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter