Modulo di accesso al neomorfismo Codice HTML CSS

691 linoscott95

Apri nell'Editor Video Pubblica il Tuo Codice

Modulo di accesso al neomorfismo Codice HTML CSS

Consigliato

12 October 2025

Animazione di caricamento CSS Struttura HTML

16 December 2024

Un codice di lebdev

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>

Modulo di accesso al neomorfismo Codice HTML CSS

Consigliato

Animazione di caricamento CSS Struttura HTML

Un codice di meriem

Un codice di lebdev

HTML

CSS

JS

Consigliato

Animazione di caricamento CSS Struttura HTML

Un codice di meriem

Un codice di lebdev

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS