Design et Ressources

Floating Label Input CSS Générateur

Générer floating label input CSS.

Entrée

Floating Label Input CSS Générateur

floating labelformcssui

Sortie

Floating Label Input CSS Generator

.field {
  position: relative;
}

.field input {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #475569;
}

.field label {
  position: absolute;
  left: 10px;
  top: 10px;
  transition: all 0.3s ease;
  background: var(--surface);
  padding: 0 4px;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 12px;
  color: #2563eb;
}

Outils similaires

Couleur Convertisseur

Convert between HEX, RGB, et HSL Couleur pourmats.

CSS Gradient Générateur

Générer a linear gradient et copy the CSS instantly.

Favicon Générateur

Create a simple SVG favicon de initials et bret Couleurs.

SVG Optimizer

Strip comments et collapse whitespace in SVG markup.

CSS Minifier

Minify CSS by removing comments et extra whitespace.

CSS pourmateur

Pretty-print CSS avec readable indentation.