Formulaire de connexion au design Glassmorphique
Par Malik • 23 August 2024
Dans cet article, nous allons explorer comment créer un formulaire de connexion utilisant le design Glassmorphism. Ce design moderne est apprécié pour son effet de flou et de transparence, donnant une apparence élégante et futuriste aux interfaces utilisateur.
HTML
Le code HTML suivant est utilisé pour structurer le formulaire de connexion. Nous y trouvons des balises standard pour créer des champs de saisie d'email et de mot de passe, ainsi que des boutons interactifs pour améliorer l'expérience utilisateur. Chaque section du formulaire est soigneusement structurée pour permettre un style uniforme et une meilleure accessibilité.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire de Connexion Glassmorphism</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<h2>Formulaire de Connexion</h2>
<div class="input-field">
<input type="text" required>
<label>Entrez votre email</label>
</div>
<div class="input-field">
<input type="password" required>
<label>Entrez votre mot de passe</label>
</div>
<div class="forget">
<label for="remember">
<input type="checkbox" id="remember">
<p>Se souvenir de moi</p>
</label>
<a href="#">Mot de passe oublié ?</a>
</div>
<button type="submit">Se Connecter</button>
<div class="register">
<p>Vous n'avez pas de compte ? <a href="#">S'inscrire</a></p>
</div>
</form>
</div>
</body>
</html>
Explication du Code HTML
Le code HTML ci-dessus représente un formulaire de connexion utilisant le design "Glassmorphism". Ce style se caractérise par une esthétique moderne, avec des effets de transparence et de flou, souvent appliqués sur des éléments de l'interface utilisateur pour créer une apparence élégante et subtile.
Voici une explication détaillée des différentes sections du code :
1. Structure de base du document HTML
La première partie du code définit le type de document et la langue :
- <!DOCTYPE html> : Spécifie que le document utilise HTML5.
- <html lang="fr"> : Ouvre le document HTML et définit la langue comme étant le français.
- <head> : Contient des métadonnées, comme le charset UTF-8, qui assure la compatibilité avec la majorité des caractères, et la balise
viewportqui optimise l'affichage sur différents appareils. - <link rel="stylesheet" href="style.css"> : Lien vers le fichier CSS externe qui contient les styles de la page, notamment les effets de glassmorphism.
2. Contenu du formulaire de connexion
Le formulaire de connexion est encapsulé dans un conteneur <div class="wrapper"> pour appliquer un style global et centrer le contenu :
- <form action="#"> : Définit un formulaire HTML. L’attribut
actionest vide car ce formulaire ne soumet pas réellement de données. - <h2> : Titre du formulaire.
- <div class="input-field"> : Utilisé pour contenir chaque champ de saisie et son étiquette, permettant un style uniforme et un positionnement approprié.
- <input type="text"> et <input type="password"> : Champs de saisie pour l'adresse email et le mot de passe, respectivement. L'attribut
requiredgarantit que l'utilisateur ne peut pas soumettre le formulaire sans remplir ces champs. - <label> : Utilisé pour décrire chaque champ de saisie, facilitant l'accessibilité et l'expérience utilisateur.
- <div class="forget"> : Contient une case à cocher pour l'option "Se souvenir de moi" et un lien pour le mot de passe oublié.
- <button type="submit"> : Bouton pour soumettre le formulaire.
- <div class="register"> : Fournit un lien pour que l'utilisateur puisse s'inscrire s'il n'a pas encore de compte.
3. Éléments interactifs et liens
Les éléments interactifs tels que les liens et les boutons améliorent l'expérience utilisateur :
- <a href="#"> : Utilisé pour les liens "Mot de passe oublié ?" et "S'inscrire". L'attribut
href="#"indique que ces liens ne mènent nulle part pour l'instant, mais peuvent être modifiés pour pointer vers les pages appropriées.
Ce formulaire de connexion utilise des classes CSS pour chaque section afin de faciliter la personnalisation et le style, en particulier pour le design "Glassmorphism". Le fichier style.css lié dans l'élément <head> est crucial pour appliquer les effets visuels tels que le flou et la transparence qui définissent le style "Glassmorphism".
CSS
Le code CSS donne au formulaire son apparence "Glassmorphism" avec des effets de flou et de transparence. Il utilise des techniques modernes de mise en page avec Flexbox et des propriétés CSS avancées comme backdrop-filter pour obtenir l'effet visuel désiré.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 0 10px;
}
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("hero-bg.jpg"), #000;
background-position: center;
background-size: cover;
}
.wrapper {
width: 400px;
border-radius: 8px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
form {
display: flex;
flex-direction: column;
}
h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #fff;
}
.input-field {
position: relative;
border-bottom: 2px solid #ccc;
margin: 15px 0;
}
.input-field label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #fff;
font-size: 16px;
pointer-events: none;
transition: 0.15s ease;
}
.input-field input {
width: 100%;
height: 40px;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
}
.input-field input:focus~label,
.input-field input:valid~label {
font-size: 0.8rem;
top: 10px;
transform: translateY(-120%);
}
.forget {
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 35px 0;
color: #fff;
}
#remember {
accent-color: #fff;
}
.forget label {
display: flex;
align-items: center;
}
.forget label p {
margin-left: 8px;
}
.wrapper a {
color: #efefef;
text-decoration: none;
}
.wrapper a:hover {
text-decoration: underline;
}
button {
background: #fff;
color: #000;
font-weight: 600;
border: none;
padding: 12px 20px;
cursor: pointer;
border-radius: 3px;
font-size: 16px;
border: 2px solid transparent;
transition: 0.3s ease;
}
button:hover {
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.15);
}
.register {
text-align: center;
margin-top: 30px;
color: #fff;
}
Explication du Code CSS
1. Importation et Réinitialisation Globale
Le fichier CSS commence par l'importation de la police Google "Open Sans". Une réinitialisation globale est appliquée pour supprimer les marges et les paddings par défaut, et tous les éléments utilisent la boîte de modèle "border-box". Cela garantit que le padding et les bordures sont inclus dans les calculs de largeur et de hauteur.
2. Stylisation du corps et de l'arrière-plan
Le corps utilise Flexbox pour centrer le formulaire verticalement et horizontalement. Un arrière-plan avec une image et une superposition sombre est créé en utilisant un pseudo-élément ::before sur le corps.
3. Conteneur du formulaire
Le conteneur du formulaire, représenté par la classe .wrapper, est stylisé pour avoir une largeur fixe, des coins arrondis, et un effet de transparence avec le flou d’arrière-plan (effet "Glassmorphism"). Ce style est obtenu grâce à backdrop-filter: blur(9px); qui crée une illusion de profondeur et d'élégance moderne. La bordure translucide ajoute un contour subtil au conteneur.
4. Mise en forme du formulaire et des champs de saisie
Les éléments du formulaire sont organisés en colonne avec display: flex et flex-direction: column. Chaque champ de saisie est encadré par une bordure inférieure et possède un label flottant qui se déplace au-dessus du champ lorsque celui-ci est activé ou rempli. Cela est géré par les sélecteurs CSS :focus~label et :valid~label, qui modifient la position et la taille du label selon l'état du champ de saisie.
5. Section 'Mot de passe oublié' et 'Se souvenir de moi'
Ces éléments sont disposés horizontalement à l'aide de display: flex et sont stylisés pour s'intégrer harmonieusement avec le reste du formulaire. La case à cocher utilise accent-color pour correspondre à la palette de couleurs générale, et les liens sont stylisés pour réagir au survol avec une légère modification de style.
6. Bouton de soumission et animation
Le bouton de soumission est conçu pour attirer l'attention avec un fond blanc et un texte noir. Il utilise également une transition CSS pour un effet visuel plus fluide lors du survol, changeant la couleur de fond et de bordure tout en inversant les couleurs du texte.
7. Section 'Inscription'
Enfin, la section d'inscription est centrée en bas du formulaire, offrant une option pour les utilisateurs sans compte. Elle est stylisée de manière simple pour maintenir la lisibilité et s'intégrer dans le design global de la page.
Conclusion
Le formulaire de connexion présenté ici est un excellent exemple de l'application du Glassmorphism dans le design web moderne. En combinant des éléments de transparence et de flou avec une disposition claire et fonctionnelle, il offre non seulement une esthétique élégante mais aussi une expérience utilisateur agréable. La conception est soigneusement structurée pour guider l'utilisateur à travers le processus de connexion avec des champs clairement étiquetés, des options de gestion de mot de passe et des liens pour les utilisateurs non inscrits. L'utilisation de CSS pour styliser les éléments et créer des effets visuels renforce l'impact visuel et améliore l'interaction avec le formulaire.
Suivez-moi
Conception de site vitrine personnalisé
Concevez un site web moderne qui attire et engage vos visiteurs dès la première vue.
Obtenez votre devis personnalisé