Radio Sliding Focus by admin

0 Add to Favorites

HTML Code
CSS Code

* {
  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; }
}

Uploaded 13th July 2024 Views 245 #modern #slding #animation #radio #blue

CSSPortal @admin

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

Member since 25th June 2024

CSS Properties Used

There are 33 CSS properties used in the above example. Click to view and learn about each property.

HTML Tags Used

There are 8 HTML Tags used in the above example. Click to view and learn about each tag.

html body main form label input span div