Un código de fastcloud893

2,042 Baxriddinov

Abrir en el editor Publica tu código

Recomendado

19 February 2026

Formulario de inicio de sesión holográfico 3D HTML

19 May 2025

Caja de moscas para animación de juegos

18 February 2024

Generador de Imágenes

HTML

CSS

:root {
  --valid: hsl(140 80% 40%);
  --invalid: hsl(10 80% 40%);
  --input: hsl(0 0% 0%);
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100;
  background-color: hsl(0 0% 6%);
  color: hsl(0 0% 98%);
}
.form-group {
  --active: 0;
  container-type: inline-size;
  flex: 1;
}

form {
  width: 40ch;
}
input {
  --is-valid: 0;
  --is-invalid: 0;
  background: linear-gradient(var(--input), var(--input)) padding-box,
    linear-gradient(var(--invalid), var(--invalid))
      calc((1 - var(--is-invalid)) * -100cqi) 0 / 100% 100% border-box,
    linear-gradient(var(--valid), var(--valid))
      calc((1 - var(--is-valid)) * 100cqi) 0 / 100% 100% border-box,
    var(--input);
  border: 2px solid transparent;
  font-size: 1rem;
  background-repeat: no-repeat;
  max-width: 100%;
  font-family: "Geist Sans", "SF Pro", sans-serif;
  font-weight: 40;
  background-color: #3b4148;
  border-radius: 10px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 100%;
  outline: 0;
  height: 50px;
}

label {
  margin-bottom: 0.5rem;
  display: inline-block;
  padding-left: 5px;
  opacity: calc(var(--active) + 0.45);
  transition: opacity 0.5s;
}

.form-group:focus-within {
  --active: 1;
}

input:invalid:not(:placeholder-shown):not(:focus-visible) {
  --is-invalid: 1;
}

input:valid {
  --is-valid: 1;
}
@media (prefers-reduced-motion: no-preference) {
  input {
    transition: background-position 0.5s;
  }
}
.submitbtn {
  background: #2a292c;
  border: 0;
  margin-top: 0.5rem;
  width: 100%;
  height: 45px;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.submitbtn:hover {
  background: #404949;
}
h1{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-weight: 400;
  font-size: 30px;
  color: #a9a9a9;
}