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
2760
otthy
Abrir en el editor
Publica tu código
Recomendado
20 September 2025
Fuegos artificiales animados con CSS, luciérnagas y girasoles
20 September 2025
Demostración de girasoles, luciérnagas y fuegos artificiales animados con CSS
15 August 2024
Un hermoso control deslizante
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) */