Formulaire de connexion Liquid Glass HTML CSS

964 thedashboard1

Ouvrir dans l'éditeur Publiez votre code

Formulaire de connexion Liquid Glass HTML CSS

Recommandé

28 December 2024

Une page d'accueil matricielle créée avec des index

3 July 2025

Roulette de décision

19 May 2025

jeu de réponses

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass Login</title>
    <style>
        /* Global Reset and Body Setup */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* Creating a vibrant, liquid-like background for the glass effect to work against */
            background: linear-gradient(135deg, #00c6ff, #0072ff, #2934ff, #8800ff);
            background-size: 400% 400%;
            animation: gradient-shift 15s ease infinite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
        }

@keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* The Liquid Glass Container */
        .glass-login-form {
            width: 380px;
            padding: 40px;
            border-radius: 20px;
            /* Key Glass Effects */
            background: rgba(255, 255, 255, 0.15); /* Light transparency */
            backdrop-filter: blur(15px); /* The main glass effect */
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); /* Deep shadow */
            transition: transform 0.3s ease;
        }

.glass-login-form:hover {
            transform: scale(1.02);
        }

h2 {
            text-align: center;
            margin-bottom: 30px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

/* Input Styling */
        .input-group {
            position: relative;
            margin-bottom: 30px;
        }

.input-group input {
            width: 100%;
            padding: 10px 0;
            font-size: 1em;
            color: #fff;
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
            outline: none;
            background: transparent;
            transition: border-bottom 0.3s;
        }

.input-group input:focus,
        .input-group input:valid {
            border-bottom: 2px solid #fff;
        }

.input-group label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            font-size: 1em;
            color: rgba(255, 255, 255, 0.7);
            pointer-events: none;
            transition: 0.5s;
        }

.input-group input:focus ~ label,
        .input-group input:valid ~ label {
            top: -20px;
            left: 0;
            color: #fff;
            font-size: 0.8em;
        }

/* Button Styling */
        .login-button {
            display: block;
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            color: #fff;
            font-size: 1.1em;
            cursor: pointer;
            transition: background 0.3s, box-shadow 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.login-button:hover {
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>

<form class="glass-login-form" onsubmit="return false;">
        <h2>Liquid Login</h2>

<div class="input-group">
            <input type="email" required>
            <label>Email Address</label>
        </div>

<div class="input-group">
            <input type="password" required>
            <label>Password</label>
        </div>

</body>
</html>

CSS