WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Casa secundaria con fondo colorido
591
sergioarmijo30
Abrir en el editor
Publica tu código
0
Recomendado
14 September 2024
Interacción con carteles de películas
16 September 2025
Formulario HTML de transferencia de monedas con selección de pago
21 July 2025
Pantalla de TV HTML con incrustación de YouTube y efectos
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) */