Webleb - Snippet di Codice -

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%);
  --trans-dur: 0.5s;
  --trans-timing1: cubic-bezier(0.65,0,0.35,1);
  --trans-timing2: cubic-bezier(0.65,0,0.35,1.5);
  font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));
}

body,
input {
  color: var(--fg);
  font: 1em/1.5 sans-serif;
  transition: background-color var(--trans-dur) var(--trans-timing1), color var(--trans-dur) var(--trans-timing1);
}

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

.switch {
  display: flex;
  margin: auto;
}
.switch__emoji {
  box-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3);
  overflow: hidden;
  pointer-events: none;
  top: 0.25em;
  left: 0.25em;
  width: 1em;
  height: 1em;
}
[dir=rtl] .switch__emoji {
  right: 0.25em;
  left: auto;
}
.switch__emoji, .switch__emoji:before, .switch__emoji:after, .switch__emoji-eye, .switch__emoji-mouth, .switch__emoji-face {
  display: block;
  position: absolute;
}
.switch__emoji, .switch__emoji:before, .switch__emoji:after, .switch__emoji-eye, .switch__emoji-mouth {
  border-radius: 50%;
}
.switch__emoji:before, .switch__emoji:after {
  content: "";
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}
.switch__emoji:before {
  background-color: #f2c40d;
  box-shadow: -0.25em -0.25em 0.25em #c29d0a inset, 0.1875em 0.1875em 0.25em #f9e286 inset;
}
.switch__emoji:after {
  box-shadow: 0 0 0.125em 0.0625em rgba(245, 208, 61, 0.5) inset;
}
.switch__emoji, .switch__emoji-face {
  transform-style: preserve-3d;
  transition: transform var(--trans-dur) var(--trans-timing2);
}
.switch__emoji-eye, .switch__emoji-mouth {
  backface-visibility: hidden;
}
.switch__emoji-eye {
  border: 0.0625em solid hsl(var(--hue), 10%, 10%);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  width: 0.25em;
  height: 0.25em;
  transform: translate(-50%, -50%) rotateY(-22.5deg) translateZ(0.5em) rotateZ(45deg);
}
.switch__emoji-eye + .switch__emoji-eye {
  transform: translate(-50%, -50%) rotateY(22.5deg) translateZ(0.5em) rotateZ(45deg);
}
.switch__emoji-mouth {
  background-image: radial-gradient(100% 100% at 50% 100%, #f2180d 20%, #f5463d 33%, rgba(245, 70, 61, 0) 35%), radial-gradient(100% 100% at 75% 113%, black 26%, rgba(0, 0, 0, 0) 35%), linear-gradient(rgba(0, 0, 0, 0) 50%, black 50% 55%, hsl(var(--hue), 10%, 10%) 65%);
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  transform: translate(-50%, -50%) rotateX(-15deg) translateZ(0.5em);
}
.switch__emoji-face {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0);
}
.switch__emoji-face + .switch__emoji-face {
  transform: rotateY(-180deg);
}
.switch__emoji-face--sad .switch__emoji-eye {
  background-color: hsl(var(--hue), 10%, 10%);
  border: 0;
  width: 0.1875em;
  height: 0.1875em;
}
.switch__emoji-face--sad .switch__emoji-mouth {
  background-image: none;
  border: 0.0625em solid transparent;
  border-top-color: hsl(var(--hue), 10%, 10%);
  transform: translate(-50%, 0) rotateX(-20deg) translateZ(0.5em);
}
.switch__input, .switch__label {
  -webkit-tap-highlight-color: transparent;
}
.switch__input {
  background-color: hsl(var(--hue), 10%, 80%);
  border-radius: 0.75em;
  box-shadow: 0.0625em 0.0625em 0.0625em white inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 80%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 90%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: block;
  width: 2.5em;
  height: 1.5em;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--trans-dur) var(--trans-timing1), box-shadow var(--trans-dur) var(--trans-timing1);
}
.switch__input:checked {
  background-color: #0ac213;
}
.switch__input:checked + .switch__emoji {
  transform: translateX(100%);
}
[dir=rtl] .switch__input:checked + .switch__emoji {
  transform: translateX(-100%);
}
.switch__input:checked + .switch__emoji .switch__emoji-face {
  transform: rotateY(179.99deg);
}
[dir=rtl] .switch__input:checked + .switch__emoji .switch__emoji-face {
  transform: rotateY(-179.99deg);
}
.switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face {
  transform: rotateY(0);
}
[dir=rtl] .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face {
  transform: rotateY(-360deg);
}
.switch__label, .switch__wrapper {
  display: block;
}
.switch__label {
  margin-inline-start: 0.5em;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}
.switch__wrapper {
  position: relative;
}

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

.switch__input {
    background-color: hsl(var(--hue), 10%, 20%);
    box-shadow: 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 25%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 20%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
  }
}

Consigliato

Modello di gioco HTML Canvas Flappy Bird

Cilindri Griglia Sfondo 3D

Un codice di securearray494

HTML

CSS

JS

Consigliato

Modello di gioco HTML Canvas Flappy Bird

Cilindri Griglia Sfondo 3D

Un codice di securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS