Un originale modulo contatti animato realizzato unicamente con CSS3 che riproduce una lettera che scivola fuori dalla busta al passaggio del mouse. La lettera naturalmente contiene i campi del modulo contatti da inviare. L’animazione funziona in tutti i browser che supportano le transizioni CSS3.
Vediamo una struttura di esempio del codice HTML da implementare:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Contact Form</title> </head> <body> <div id="wrap"> <h1>Send a message</h1> <div id='form_wrap'> <form> <p>Hello Joe,</p> <label for="email">Your Message : </label> <textarea name="message" value="Your Message" id="message" ></textarea> <p>Best,</p> <label for="name">Name: </label> <input type="text" name="name" value="" id="name" /> <label for="email">Email: </label> <input type="text" name="email" value="" id="email" /> <input type="submit" name ="submit" value="Now, I send, thanks!" /> </form> </div> </div> </body> </html> |
Naturalmente potrete rendere in italiano il vostro modulo contatti sostituendo le relative parole presenti.
Per vederlo in azione andate alla pagina demo. Per ulteriori informazioni consultate la pagina dell’autore. Buon lavoro!
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 6 anni fa nella categoria 
