MICHELEPISANI.IT
 

Con solo HTML e CSS!

Shake Animation on Invalid Inputs

Ottobre 23
07:082022

Animazione di scuotimento di un campo di input quando il valore inserito non è quello previsto.

Il tutto utilizzando solo HTML e CSS, nessun codice JavaScript!

Qui il video in MENO DI 1 MINUTO! --> https://www.youtube.com/shorts/f62q_jq8deE

HTML:

<input
    type="text"
    pattern="[a-zA-Z ]*"
    placeholder="Inserisci il tuo nome"
    />

 

CSS:

input:invalid {
  animation: shake .3s
}

@keyframes shake {
  25% { transform: translateX(4px) }
  50% { transform: translateX(-4px) }
  75% { transform: translateX(4px) }
}

 

Iscriviti al mio canale YouTube!

Tags

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao Stefano, purtroppo non posso sapere se il tuo file di installazione è quello che ho …

Stefano

A me rimane il Terminale in esecuzione, con la rotellina che gira, ma il programma non si apre …

Tino

Buon giorno, mi chiedevo se il tuo progetto può essere adattato a misurare il livello del gpl in un …

Michele Pisani

Sono da considerare le corpose righe di codice della libreria jquery che richiede di essere inclusa …