WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Radios con enfoque deslizante
3008
otthy
Abrir en el editor
Publica tu código
Recomendado
26 September 2025
Animación de carga CSS con imagen de fondo
14 October 2024
Iconos sociales
21 September 2024
Agregar botón para abrir y agregar datos de perfil con validación
HTML
Copy
Alexander Graham Bell
Samuel Morse
Thomas Edison
CSS
Copy
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.65,0,0.35,1); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320)); } body, input { color: var(--fg); font: 1em/1.5 "DM Sans", sans-serif; } body { background-color: var(--bg); display: flex; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } main { margin: auto; padding: 1.5em 0; width: 100%; } form { margin: auto; max-width: 20em; position: relative; width: calc(100% - 3em); } label, input[type="radio"] { cursor: pointer; -webkit-tap-highlight-color: transparent; } label { background-color: hsla(0,0%,100%,0); border-radius: 0.75em; display: flex; align-items: center; padding: 1.5em; transition: background-color var(--trans-dur); } input[type="radio"] { background-color: hsl(0,0%,100%); border-radius: 50%; box-shadow: 0 0 0 0.0625em hsl(var(--hue),90%,80%), 0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3); flex-shrink: 0; margin-inline-end: 1em; outline: transparent; position: relative; width: 1.5em; height: 1.5em; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); -webkit-appearance: none; appearance: none; } input[type="radio"]:before, input[type="radio"]:after { border-radius: 50%; content: ""; display: block; position: absolute; transform: scale(0); transition: transform var(--trans-dur) var(--trans-timing); } input[type="radio"]:before { box-shadow: 0 0 0 0.5em var(--primary) inset, 0 0 0 0.0625em var(--primary); top: -0.0625em; left: -0.0625em; width: calc(100% + 0.125em); height: calc(100% + 0.125em); } input[type="radio"]:after { background-color: hsl(0,0%,100%); top: 25%; left: 25%; width: 50%; height: 50%; } input[type="radio"]:checked:before, input[type="radio"]:checked:after { transform: scale(1); } label:has(input[type="radio"]:checked), label:has(input[type="radio"]:not(:checked)):hover { background-color: hsla(0,0%,100%,0.5); } .selection { border-radius: 0.75em; box-shadow: 0 0 0 0.125em var(--primary) inset; display: none; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 4.5em; transition: transform var(--trans-dur) var(--trans-timing); } label:has(input[type="radio"]:checked) ~ .selection { animation: fade-in var(--trans-dur) var(--trans-timing); display: inherit; } label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection { transform: translateY(100%); } label:nth-of-type(3):has(input[type="radio"]:checked) ~ .selection { transform: translateY(200%); } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); } label { background-color: hsla(var(--hue),90%,30%,0); } label:has(input[type="radio"]:checked), label:has(input[type="radio"]:not(:checked)):hover { background-color: hsla(var(--hue),90%,30%,0.5); } input[type="radio"] { background-color: hsl(var(--hue),90%,30%); box-shadow: 0 0 0 0.0625em hsl(var(--hue),90%,50%), 0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3); } } /* Animations */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */