Formulaire de connexion néomorphique (code HTML et CSS)

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 May 2025

Interaction avec les affiches de films

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Neomorphism Login</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        /* Base Colors & Variables for Neomorphism */
        :root {
            --bg-color: #e0e0e0;
            --light-shadow: #ffffff;
            --dark-shadow: #a3b1c6;
            --main-text-color: #333;
            --accent-color: #6a67ce; /* A pleasant purple */
            --accent-hover: #7b78e4;
            --accent-active: #5c59b9;
        }

/* Global Styles */
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, var(--bg-color) 0%, #cacaca 50%, var(--bg-color) 100%);
            background-size: 400% 400%; /* Larger size for animation */
            animation: backgroundAnimation 15s ease infinite alternate; /* Slow, smooth animation */
            color: var(--main-text-color);
            overflow: hidden; /* Prevent scrollbar if background moves slightly */
        }

/* Background Animation */
        @keyframes backgroundAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Login Container */
        .login-container {
            background: var(--bg-color);
            padding: 40px;
            border-radius: 30px;
            box-shadow: 10px 10px 20px var(--dark-shadow),
                        -10px -10px 20px var(--light-shadow);
            text-align: center;
            width: 350px;
            max-width: 90%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            z-index: 1; /* Ensure it's above potential pseudo-elements */
        }

.login-container:hover {
            transform: translateY(-5px); /* Subtle lift on hover */
            box-shadow: 15px 15px 30px var(--dark-shadow),
                        -15px -15px 30px var(--light-shadow);
        }

.login-container h2 {
            font-size: 2.5em;
            margin-bottom: 30px;
            color: var(--main-text-color);
            text-shadow: 1px 1px 2px var(--light-shadow);
            font-weight: 700;
        }

/* Form Group (Label + Input) */
        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--main-text-color);
            font-size: 0.95em;
        }

/* Input Fields */
        .form-group input {
            width: calc(100% - 40px); /* Adjust for padding */
            padding: 15px 20px;
            border: none;
            outline: none;
            border-radius: 15px;
            background: var(--bg-color);
            font-size: 1em;
            color: var(--main-text-color);
            box-shadow: inset 5px 5px 10px var(--dark-shadow),
                        inset -5px -5px 10px var(--light-shadow);
            transition: box-shadow 0.3s ease, transform 0.2s ease;
            font-weight: 400;
        }

.form-group input::placeholder {
            color: rgba(51, 51, 51, 0.6);
        }

.form-group input:focus {
            box-shadow: inset 3px 3px 7px var(--dark-shadow),
                        inset -3px -3px 7px var(--light-shadow),
                        0 0 0 3px var(--accent-color); /* Subtle accent ring on focus */
            transform: scale(1.01); /* Slightly enlarge on focus */
        }

/* Login Button */
        .login-button {
            width: 100%;
            padding: 18px;
            border: none;
            outline: none;
            border-radius: 25px;
            background: var(--accent-color);
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 7px 7px 15px var(--dark-shadow),
                        -7px -7px 15px var(--light-shadow);
            transition: all 0.3s ease;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

.login-button:hover {
            background: var(--accent-hover);
            box-shadow: 10px 10px 20px var(--dark-shadow),
                        -10px -10px 20px var(--light-shadow);
            transform: translateY(-3px); /* Subtle lift */
        }

.login-button:active {
            background: var(--accent-active);
            box-shadow: inset 3px 3px 7px var(--dark-shadow),
                        inset -3px -3px 7px var(--light-shadow);
            transform: translateY(1px); /* Press down effect */
        }

/* Forgot Password / Sign Up links */
        .links {
            margin-top: 25px;
            font-size: 0.9em;
            font-weight: 400;
        }

.links a {
            color: var(--accent-color);
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s ease, text-decoration 0.3s ease;
        }

.links a:hover {
            color: var(--accent-active);
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <button type="submit" class="login-button">Login</button>
        </form>
        <div class="links">
            <a href="#">Forgot Password?</a>
            <span>•</span>
            <a href="#">Sign Up</a>
        </div>
    </div>
</body>
</html>

Formulaire de connexion néomorphique (code HTML et CSS)

Recommandé

Un code par mironovbogdan341

Un code de Mete

Interaction avec les affiches de films

HTML

CSS

JS

Recommandé

Un code par mironovbogdan341

Un code de Mete

Interaction avec les affiches de films

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS