WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
Alexander Graham Bell
Samuel Morse
Thomas Edison
* { 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; } }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
Alexander Graham Bell
Samuel Morse
Thomas Edison
* { 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; } }
/* Replace with your JS Code (Leave empty if not needed) */