Página de inicio de sesión

Abrir en el editor Publica tu código

Recomendado

10 February 2025

Formulario de inicio de sesión de Glassmorphism moderno en HTML y CSS

15 December 2023

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Connexion Ultime</title>
</head>
<body>
  <div class="background-stars">
    <script>
      for (let i = 0; i < 150; i++) {
        const star = document.createElement('div');
        star.classList.add('star');
        star.style.top = Math.random() * 100 + '%';
        star.style.left = Math.random() * 100 + '%';
        star.style.animationDuration = (Math.random() * 5 + 2) + 's';
        document.body.querySelector('.background-stars').appendChild(star);
      }
    </script>
  </div>

<div class="background-shapes">
    <div id="shapes-container"></div>
    <script>
      const shapes = [
        { type: 'circle', color: 'rgba(255, 0, 150, 0.8)' },
        { type: 'square', color: 'rgba(0, 200, 255, 0.8)' },
        { type: 'triangle', color: 'rgba(0, 255, 150, 0.8)' }
      ];

const shapeElements = [];

for (let i = 0; i < 9; i++) {
        const type = shapes[i % 3].type;
        const el = document.createElement('div');
        el.classList.add('shape', type);
        el.style.top = Math.random() * 100 + 'vh';
        el.style.left = Math.random() * 100 + 'vw';
        document.getElementById('shapes-container').appendChild(el);

shapeElements.push({
          el,
          dx: Math.random() * 2 + 0.5,
          dy: Math.random() * 2 + 0.5
        });
      }

function animateShapes() {
        shapeElements.forEach(shape => {
          let rect = shape.el.getBoundingClientRect();
          let x = rect.left;
          let y = rect.top;

let newX = x + shape.dx;
          let newY = y + shape.dy;

if (newX <= 0 || newX + rect.width >= window.innerWidth) shape.dx *= -1;
          if (newY <= 0 || newY + rect.height >= window.innerHeight) shape.dy *= -1;

shape.el.style.left = (shape.el.offsetLeft + shape.dx) + 'px';
          shape.el.style.top = (shape.el.offsetTop + shape.dy) + 'px';
        });

requestAnimationFrame(animateShapes);
      }

animateShapes();
    </script>
  </div>

<div class="login-container">
    <h2>Bienvenue</h2>
    <form>
      <div class="form-group">
        <label for="username">Nom d'utilisateur</label>
        <input type="text" id="username" name="username" placeholder="Votre nom d'utilisateur" required />
      </div>
      <div class="form-group">
        <label for="password">Mot de passe</label>
        <input type="password" id="password" name="password" placeholder="Votre mot de passe" required />
      </div>
      <button type="submit">Se connecter</button>
    </form>
    <div class="footer">© 2025 Connexion Futuriste</div>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

body {
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      background: radial-gradient(#0a0a23, #000);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }

.background-stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
    }

.background-shapes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
    }

.star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      border-radius: 50%;
      animation: twinkle 4s infinite ease-in-out;
    }

@keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

.shape {
      position: absolute;
      opacity: 0.7;
    }

.circle {
      width: 40px;
      height: 40px;
      background: rgba(255, 0, 150, 0.8);
      border-radius: 50%;
    }

.square {
      width: 40px;
      height: 40px;
      background: rgba(0, 200, 255, 0.8);
    }

.triangle {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 40px solid rgba(0, 255, 150, 0.8);
    }

.login-container {
      background: rgba(15, 15, 30, 0.95);
      padding: 3rem;
      border-radius: 20px;
      box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset;
      width: 100%;
      max-width: 420px;
      animation: pulse 5s infinite;
      z-index: 1;
    }

@keyframes pulse {
      0%, 100% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset; }
      50% { box-shadow: 0 0 60px #ff66ff, 0 0 100px #00ffe1 inset; }
    }

.login-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 2rem;
      color: #ff66ff;
      text-shadow: 0 0 15px #ff66ff, 0 0 25px #00ffe1;
    }

.form-group {
      margin-bottom: 1.5rem;
    }

.form-group label {
      display: block;
      margin-bottom: 0.5rem;
      color: #00ffe1;
      text-shadow: 0 0 10px #00ffe1;
    }

.form-group input {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 12px;
      background-color: #111;
      color: #fff;
      box-shadow: 0 0 15px #ff00ff inset;
      font-size: 1rem;
    }

.form-group input:focus {
      outline: none;
      box-shadow: 0 0 20px #ff00ff inset, 0 0 10px #00ffe1;
    }

button {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #ff00ff, #00ffe1);
      color: #000;
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 0 25px #ff00ff;
      transition: all 0.4s ease;
    }

button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px #ff00ff, 0 0 50px #00ffe1;
    }

.footer {
      margin-top: 2rem;
      text-align: center;
      font-size: 0.9rem;
      color: #ccc;
      text-shadow: 0 0 5px #00ffe1;
    }

Página de inicio de sesión

Recomendado

Un código de bachir123

Formulario de inicio de sesión de Glassmorphism moderno en HTML y CSS

Juego de Pilas en JavaScript

HTML

CSS

JS

Recomendado

Un código de bachir123

Formulario de inicio de sesión de Glassmorphism moderno en HTML y CSS

Juego de Pilas en JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS