Home
css

Créer une formulaire avec effet Glassmorphism en CSS

Salut à tous. Bienvenue dans le tutoriel d’aujourd’hui. Dans le tutoriel d’aujourd’hui, nous allons apprendre à créer une formulaire avec effet Glassmorphism en CSS. Pour construire ce projet, nous avons besoin de HTML, CSS. Découvrons comment construire ce projet en quelques étapes simples et faciles à suivre.

Code HTML

Nous commençons par le code HTML. Tout d’abord, copiez le code ci-dessous et collez-le dans votre fichier HTML.

Double taper sur le code pour copier son contenu


<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Glassmorphism</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background">
        <div class="shape"></div>
        <div class="shape"></div>
    </div>
    <form>
        <h3>Te revoilà!
            <span>Connectez-vous.</span>
        </h3>

        <label for="username">Pseudo</label>
        <input type="text" placeholder="www.codingteam.tech" id="username">

        <label for="password">Mot de passe</label>
        <input type="password" placeholder="*************" id="password">

        <button>Connexion</button>
    </form>
</body>
</html>

Code CSS

Ensuite, nous stylisons notre application en utilisant CSS. Pour cette copie, le code qui vous a été fourni ci-dessous et collez-le dans une feuille de style.

Double taper sur le code pour copier son contenu


*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #080710;
}
.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}
.shape:first-child{
    background: linear-gradient(
        #9b22ea,
        #bf23f6
    );
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -30px;
    bottom: -80px;
}
form{
    height: 520px;
    width: 430px;
    background-color: rgba(255,255,255,0.07);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
}
form *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
}
form h3 span{
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: #e5e5e5;
}
label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #e5e5e5;
}
button{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

Commentaires

  • A+
  • A-