Formulaire de connexion Liquid Glass HTML CSS

573 thedashboard1

Ouvrir dans l'éditeur Video Publiez votre code

Formulaire de connexion Liquid Glass HTML CSS

Recommandé

26 April 2025

Tableau de bord d'administration d'AdminHub

27 May 2025

Un code par mironovbogdan341

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>

Formulaire de connexion Liquid Glass HTML CSS

Recommandé

Un code de Metehan

Tableau de bord d'administration d'AdminHub

Un code par mironovbogdan341

HTML

CSS

JS

Recommandé

Un code de Metehan

Tableau de bord d'administration d'AdminHub

Un code par mironovbogdan341

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS