WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Animación de desplazamiento
1,968
ledoc
Abrir en el editor
Publica tu código
2
Recomendado
17 May 2025
Formulario de inicio de sesión moderno + barra lateral deslizante
13 June 2025
Un código de Metehan
13 April 2026
Plantilla HTML para formulario de inicio de sesión y registro
HTML
Copy
<div id="grid"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>
CSS
Copy
* { padding: 0; margin: 0; box-sizing: border-box; transition: 0.75s ease; } body { min-height: 100vh; display: grid; place-items: center; gap: 4rem; background: #b8860b; } #grid { width: calc(100% - 20vmin); aspect-ratio: 16 / 7; background: linen; display: grid; grid-template-columns: 1fr 0fr 1fr; place-items: center; outline: 2px solid #804a00; border-radius: 5vmin; box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1); overflow: hidden; } .left, .right, .middle { width: 100%; height: 100%; background-size: cover; background-position: center; transform-origin: center; } .left { background-image: url("https://assets.codepen.io/4787486/hamster-3.jpg"); border-right: 1px solid #804a00; } .middle { font-size: 0rem; background-image: url("https://assets.codepen.io/4787486/hamster-4.jpg"); } .right { background-image: url("https://assets.codepen.io/4787486/hamster-2.jpg"); border-left: 1px solid #804a00; } #grid:hover { grid-template-columns: 0fr 1fr 0fr; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
