Formulier animatie

Auteur: UpLink - 06 mei 2013 - 13:51 - Gekeurd door: Abbas - Hits: 2495 - 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):

"html" code - Bekijk de code zonder highlighting - Klap code in

                <form method="post" action="#">
<table>
    <tr>
        <td>Naam:</td>
        <td><input type="text" name="naam" /></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input type="text" name="email" /></td>
    </tr>
</table>
</form>

            
<form method="post" action="#">
<table>
    <tr>
        <td>Naam:</td>
        <td><input type="text" name="naam" /></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input type="text" name="email" /></td>
    </tr>
</table>
</form>
 

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

css code - Bekijk de code zonder highlighting - Klap code in

                input {
    width: 100px;
    transition: width 1s ease;
}

input:focus {
    width: 300px;
}

            
input {
    width: 100px;
    transition: width 1s ease;
}
 
input:focus {
    width: 300px;
}
 

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (2)