Webleb - fragmentos de código - Casilla de verificación / ¿Desarrollador o diseñador?

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="switch">
	<label class="switch__label" for="occupation" id="developer">Developer</label>
	<button class="switch__button" type="button" id="occupation" title="Developer or designer?" aria-live="polite" aria-labelledby="developer">
		<svg class="switch__icon" viewBox="0 0 16 16" width="16px" height="16px" aria-hidden="true">
			<g fill="none" stroke="hsl(223,10%,10%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
				<g class="switch__icon1" transform="translate(1,1)">
					<polyline class="switch__icon1-1" points="0 0,6 6" stroke-dasharray="8.49 8.49" />
					<polyline class="switch__icon1-2" points="0 0,0 8.49" stroke-dasharray="8.49 8.49" transform="rotate(-45) translate(0,8.49) rotate(90)" />
					<polyline class="switch__icon1-3" points="0 0,-6 6" stroke-dasharray="16.98 8.49" stroke-dashoffset="16.98" transform="rotate(-12)" />
					<polyline class="switch__icon1-4" points="0 0,0 8.49" stroke-dasharray="8.49 16.98" stroke-dashoffset="16.98" transform="rotate(33) translate(0,8.49) rotate(-57)" />
					<polyline class="switch__icon1-5" points="0 0,0 8" stroke-dasharray="16 8" stroke-dashoffset="16" />
					<circle class="switch__icon1-6" cx="0" cy="8" r="1" stroke-dasharray="6.29 12.57" stroke-dashoffset="12.57" />
				</g>
				<g class="switch__icon2" transform="translate(8,15)">
					<polyline class="switch__icon2-1" points="0 0,7 0" />
					<polyline class="switch__icon2-2" points="0 0,0 4" stroke-dasharray="4 4" stroke-dashoffset="4" />
					<polyline class="switch__icon2-3" points="7 0,7 4" stroke-dasharray="4 4" stroke-dashoffset="4" />
					<polyline class="switch__icon2-4" points="0 0,7 0" />
				</g>
			</g>
		</svg>
	</button>
	<label class="switch__label" for="occupation" id="designer">Designer</label>
</div>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --switch-dev: hsl(223,90%,50%);
  --switch-des: hsl(283,90%,70%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65,0,0.35,1);
  font-size: calc(21px + (120 - 21) * (100vw - 280px) / (3840 - 280));
}

body,
button {
  color: var(--fg);
  font: 1em/1.5 "DM Sans", sans-serif;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

body {
  background-color: var(--bg);
  display: flex;
  height: 100vh;
}

.switch {
  display: flex;
  align-items: center;
  margin: auto;
}
.switch__button, .switch__icon {
  display: block;
}
.switch__button, .switch__label {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch__button {
  background-color: var(--switch-dev);
  border-radius: 0.5em;
  box-shadow: 0 -0.0625em 0 hsl(var(--hue), 10%, 80%), 0 0.0625em 0 white;
  position: relative;
  width: 3em;
  height: 1.5em;
  transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur);
  -webkit-appearance: none;
  appearance: none;
}
.switch__button:before {
  background-color: white;
  border-radius: 0.25em;
  box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.2);
  content: "";
  display: block;
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1em;
  height: 1em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
[dir=rtl] .switch__button:before {
  right: 0.25em;
  left: auto;
}
.switch__button[aria-labelledby=designer] {
  background-color: var(--switch-des);
}
.switch__icon {
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 0.5em;
  height: 0.5em;
}
[dir=rtl] .switch__icon {
  right: 0.5em;
  left: auto;
}
.switch__icon,
.switch__icon circle,
.switch__icon g,
.switch__icon polyline {
  transition: stroke-dashoffset var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing);
}
.switch__icon1 {
  transform: translate(1px, 1px);
}
.switch__icon1-2 {
  transform: rotate(-45deg) translate(0, 8.49px) rotate(90deg);
}
.switch__icon2 {
  transform: translate(8px, 15px);
}
.switch__button[aria-labelledby=designer] .switch__icon, .switch__button[aria-labelledby=designer]:before {
  transform: translateX(1.5em);
}
[dir=rtl] .switch__button[aria-labelledby=designer] .switch__icon, [dir=rtl] .switch__button[aria-labelledby=designer]:before {
  transform: translateX(-1.5em);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1 {
  transform: translate(1px, 1px) rotate(-45deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-1, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-3, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-4, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-5, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-6 {
  stroke-dashoffset: 0;
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-1 {
  transform: rotate(12deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-2, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-4 {
  stroke-dashoffset: 2.82;
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-2 {
  transform: rotate(-33deg) translate(0, 8.49px) rotate(57deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon2 {
  transform: translate(7px, 12px) rotate(-45deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon2-1 {
  transform: translateY(4px);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon2-2, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon2-3 {
  stroke-dashoffset: 0;
}
.switch__label {
  font-size: 0.75em;
  line-height: 2;
  padding-inline-end: 0.75em;
}
.switch__label ~ .switch__label {
  padding-inline: 0.75em 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }

.switch__button {
    box-shadow: 0 -0.0625em 0 black, 0 0.0625em 0 hsl(var(--hue), 10%, 20%);
  }
}

Casilla de verificación / ¿Desarrollador o diseñador?

Recomendado

Come game

Formulario de inicio de sesión HTML con fondo de matriz

Generador de códigos QR en JavaScript

HTML

CSS

JS

Recomendado

Come game

Formulario de inicio de sesión HTML con fondo de matriz

Generador de códigos QR en JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS