WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Casa secundaria con fondo colorido
161
sergioarmijo30
Abrir en el editor
Video
Publica tu código
0
Recomendado
19 December 2025
Plantilla de formulario de inicio de sesión HTML con inicio de sesión social
15 September 2024
Vídeo de fondo
25 August 2025
Página de error 404 animada con corazón y partículas
HTML
Copy
Sxrgxx
User Login
Username
Password
Sign in
Forgot password?
CSS
Copy
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"); :root { --space-root: 1rem; --space-xs: calc(var(--space-root) / 2); --space-s: calc(var(--space-root) / 1.5); --space-m: var(--space-root); --space-l: calc(var(--space-root) * 1.5); --space-xl: calc(var(--space-root) * 2); --color-primary: rgba(229, 122, 55, 0.408); --color-secondary: rgb(216, 244, 59); --color-tertiary: rgba(117, 131, 126, 0.219); --base-border-radius: 0.25rem; --ease: cubic-bezier(0.075, 0.82, 0.165, 1); --duration: 350ms; --font-family: "Roboto", sans-serif; --font-size: 1.25rem; } * { box-sizing: border-box; } body { display: grid; place-items: center; margin: 0; height: 100vh; padding: var(--space-m); font-size: var(--font-size); font-family: var(--font-family); line-height: 1.2; background: linear-gradient( 135deg, #b0a196, #d4bbb0, #9d8e7b, #6b8e23 ); background-size: 400% 400%; animation: fondoOtono 12s ease infinite; } a { color: var(--color-primary); } a:focus { color: var(--color-secondary); } h2 { font-weight: 700; font-size: calc(var(--font-size) * 1.5); } @keyframes fondoOtono { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .form { position: relative; width: 100%; max-width: 450px; margin: 0 auto; transform: skewY(-5deg) translateY(10%) scale(0.94); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); } .form:before, .form:after { content: ""; position: absolute; pointer-events: none; background: linear-gradient( 120deg, #f1923f, #87aa41, #3b78868d, #a64e73, #5e4896, #2f71a3, #ffaebd ); background-size: 300% 300%; animation: coloresLineas 5s linear infinite; width: 25%; height: 100%; transition: transform var(--duration) var(--ease); } .form:before { top: 0; right: calc(100% - 1px); transform-origin: 100% 100%; transform: skewY(-35deg) scaleX(-1); z-index: -1; } .form:after { top: 0; left: calc(100% - 1px); transform-origin: 0 0; transform: skewY(-35deg) scaleX(-1); z-index: 2; } .form:hover, .form:focus-within { transform: scale(1.0001); box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.1); } .form:hover:before, .form:hover:after, .form:focus-within:before, .form:focus-within:after { transform: skewY(0); } .form:hover:before, .form:hover:after, .form:focus-within:before, .form:focus-within:after { background-color: rgba(18, 18, 18, 0.478); transform: skewY(0); } .form-inner { padding: var(--space-xl); background: linear-gradient( 120deg, #ff0080, #530658, #40e0d0, #8a2be2 ); background-size: 300% 300%; animation: colores 6s ease infinite; transition: background var(--duration) var(--ease); z-index: 1; } .form-inner > * + * { margin-top: var(--space-xl); } .input-wrapper:focus-within label { color: var(--color-secondary); } .input-wrapper:focus-within .icon { background-color: var(--color-secondary); } .input-wrapper:focus-within input { border-color: var(--color-secondary); } .input-wrapper + .input-wrapper { margin-top: var(--space-l); } .input-group { position: relative; } .input-group input { border-radius: var(--base-border-radius); padding-left: calc(var(--space-s) + 60px); } .input-group .icon { position: absolute; top: 0; left: 0; height: 100%; border-top-left-radius: var(--base-border-radius); border-bottom-left-radius: var(--base-border-radius); pointer-events: none; } label { font-size: calc(var(--font-size) / 1.65); font-weight: 700; text-transform: uppercase; letter-spacing: 0.065rem; display: block; margin-bottom: var(--space-xs); color: var(--color-primary); } .icon { display: flex; align-items: center; flex: 0 1 auto; padding: var(--space-m); background-color: var(--color-primary); } .icon svg { width: 1.25em; height: 1.25em; fill: white; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform var(--duration) var(--ease); } input { flex: 1 1 0; width: 100%; outline: none; padding: var(--space-m); font-size: var(--font-size); font-family: var(--font-family); color: var(--color-secondary); border: 2px solid var(--color-primary); } input:focus { color: var(--color-primary); } .btn-group { display: flex; align-items: center; justify-content: space-between; } .btn-group > * + * { margin-left: var(--space-s); } .btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; outline: none; padding: var(--space-m) var(--space-l); cursor: pointer; border: 2px solid transparent; border-radius: var(--base-border-radius); } .btn--primary { font-size: calc(var(--font-size) / 1.65); font-weight: 700; text-transform: uppercase; letter-spacing: 0.065rem; background-color: var(--color-primary); border-color: var(--color-primary); color: white; } .btn--primary:focus { background-color: var(--color-secondary); border-color: var(--color-secondary); } .btn--text { font-size: calc(var(--font-size) / 1.5); padding: 0; } @keyframes colores { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .form:hover .form-inner, .form:focus-within .form-inner { background: rgba(18, 18, 18, 0.48); animation: none; } @keyframes coloresLineas { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */