WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Entrée HTML et CSS animée
1907
hasan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 December 2025
Interface utilisateur de chatbox CSS : interface de messagerie réactive
20 August 2024
Formulaire de connexion LED
19 May 2025
COMPTAGE SIMPLE
HTML
Copy
<div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">First Name</label> </div> <div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">Last Name</label> </div> <div class="input-group"> <input required="" type="email" name="email" autocomplete="off" class="input"> <label class="user-label">Enter your Email</label> </div>
CSS
Copy
body{ margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .input-group { position: relative; padding:20px; } .input { border: dotted 1.5px #9e9e9e; border-radius: 1rem; background: none; padding: 1rem; font-size: 1rem; color: #f5f5f5; transition: border 150ms cubic-bezier(0.4,0,0.2,1); } .user-label { position: absolute; left: 35px; color: #e8e8e8; pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); } .input:focus, input:valid { outline: solid 1px; border: 1.5px solid #1a73e8; } .input:focus ~ label, input:valid ~ label { transform: translateY(-50%) scale(0.8); background-color: #212121; padding:0 .2em; color: #2196f3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
