login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > Overige > CSS > Formulier animatie

Formulier animatie

Auteur: UpLink - 06 mei 2013 - 13:51 - Gekeurd door: Abbas - Hits: 2409 - Aantal punten: (0 stemmen)




Niet zo moeilijk in te bouwen in je eigen website. Gewoon wat CSS toevoegen voor de input velden.

Hieronder staat een stukje HTML (formulier) dat niet nodig is. Enkel de CSS is van toepassing. De HTML staat er gewoon voor de luierikken onder ons die het eens willen proberen, maar de fut niet hebben om snel even een form te schrijven 


Wat het eigenlijk doet is het volgende:

Je input veld word standaard 100px groot. Als je in je inputveld klikt (de focus dus) word deze verlengd tot 300px.
Je kan natuurlijk wat spelen met de width's zodat het je layout niet ver*****.

Niet alledaags gebruikt, maar plezant voor de hobby'ist...

Have fun...

Code:
HTML (form):

  1. <form method="post" action="#">
  2. <table>
  3. <tr>
  4. <td>Naam:</td>
  5. <td><input type="text" name="naam" /></td>
  6. </tr>
  7. <tr>
  8. <td>Email:</td>
  9. <td><input type="text" name="email" /></td>
  10. </tr>
  11. </table>
  12. </form>


CSS gedeelte (kan je gewoon in je huidige CSS file plaatsen):

  1. input {
  2. width: 100px;
  3. transition: width 1s ease;
  4. }
  5.  
  6. input:focus {
  7. width: 300px;
  8. }
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (2)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.013s