WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3012
otthy
Apri nell'Editor
Pubblica il Tuo Codice
21 September 2024
Menu mobile
25 November 2025
Codice sorgente HTML5 del gioco Stick Merge
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) */