WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario de inicio de sesión multicolor
3906
Andev.web
Abrir en el editor
Publica tu código
Recomendado
7 December 2024
Un código de slowlogic9
18 August 2024
Tableta de dibujo
15 December 2023
Juego de Pilas en JavaScript
HTML
Copy
Andev Web
Andev
web
Inciar
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Poppins:wght@300&display=swap'); :root { --background: #1a1a2e; --color: #ffffff; --primary-color: #0f3460; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", sans-serif; background: var(--background); color: var(--color); letter-spacing: 1px; transition: background 0.2s ease; } a { text-decoration: none; color: var(--color); } h1 { font-size: 2.5rem; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .login-container { position: relative; width: 22.2rem; } .form-container { border: 1px solid hsla(0, 0%, 65%, 0.158); box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2); border-radius: 10px; backdrop-filter: blur(20px); z-index: 99; padding: 2rem; } .login-container form input { display: block; padding: 14.5px; width: 100%; margin: 2rem 0; color: var(--color); outline: none; background-color: #9191911f; border: none; border-radius: 5px; font-weight: 500; letter-spacing: 0.8px; font-size: 15px; backdrop-filter: blur(15px); } .login-container form input:focus { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2); animation: wobble 0.3s ease-in; } .login-container form button { background-color: var(--primary-color); color: var(--color); display: block; padding: 13px; border-radius: 5px; outline: none; font-size: 18px; letter-spacing: 1.5px; font-weight: bold; width: 100%; cursor: pointer; margin-bottom: 2rem; transition: all 0.1s ease-in-out; border: none; } .login-container form button:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); transform: scale(1.02); } .circle { width: 8rem; height: 8rem; background: var(--primary-color); border-radius: 50%; position: absolute; } .illustration { position: absolute; top: -14%; right: -2px; width: 90%; } .circle-one { top: 0; left: 0; z-index: -1; transform: translate(-45%, -45%); } .circle-two { bottom: 0; right: 0; z-index: -1; transform: translate(45%, 45%); } .register-forget { margin: 1rem 0; display: flex; justify-content: space-between; } .opacity { opacity: 0.6; } .theme-btn-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding: 1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.1); } .theme-btn { cursor: pointer; transition: all 0.3s ease-in; margin: 0 5px; width: 25px; height: 25px; border-radius: 50%; } .theme-btn:hover { width: 40px !important; } @keyframes wobble { 0% { transform: scale(1.025); } 25% { transform: scale(1); } 75% { transform: scale(1.025); } 100% { transform: scale(1); } }
JS
Copy
const themes = [ { background: "#1A1A2E", color: "#FFFFFF", primaryColor: "#0F3460" }, { background: "#461220", color: "#FFFFFF", primaryColor: "#E94560" }, { background: "#192A51", color: "#FFFFFF", primaryColor: "#967AA1" }, { background: "#F7B267", color: "#000000", primaryColor: "#F4845F" }, { background: "#F25F5C", color: "#000000", primaryColor: "#642B36" }, { background: "#231F20", color: "#FFF", primaryColor: "#BB4430" } ]; const setTheme = (theme) => { const root = document.querySelector(":root"); root.style.setProperty("--background", theme.background); root.style.setProperty("--color", theme.color); root.style.setProperty("--primary-color", theme.primaryColor); root.style.setProperty("--glass-color", theme.glassColor); }; const displayThemeButtons = () => { const btnContainer = document.querySelector(".theme-btn-container"); themes.forEach((theme) => { const div = document.createElement("div"); div.className = "theme-btn"; div.style.cssText = `background: ${theme.background}; width: 25px; height: 25px`; btnContainer.appendChild(div); div.addEventListener("click", () => setTheme(theme)); }); }; displayThemeButtons();