Webleb - Snippets de Código - Um Código por PNL

HTML

CSS

body {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.theme-switch {
  --toggle-size: 30px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-light-bg: #3D7EAE;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 30px;
}

.container {
  width: 5.625em;
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: 6.25em;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
}

.checkbox {
  display: none;
}

.circle-container {
  width: 3.375em;
  height: 3.375em;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: 6.25em;
  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  -o-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  pointer-events: none;
}

.sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: 6.25em;
  background-color: var(--sun-bg);
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
}

.moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  ;
  position: relative;
}

.spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: 6.25em;
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.checkbox:checked+.container {
  background-color: #1D1F2C;
}

.checkbox:checked+.container .circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.checkbox:checked+.container .circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.checkbox:checked+.container .moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

Um Código por PNL

Recomendado

Exemplo de código HTML da página de login em turco

Código HTML do jogo Aquapark IO desbloqueado

Um código de securearray494

HTML

CSS

JS

Recomendado

Exemplo de código HTML da página de login em turco

Código HTML do jogo Aquapark IO desbloqueado

Um código de securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS