Unique css3 contact form

Home FormUnique css3 contact form

Unique css3 contact form

11 years ago Views

25250

6742

pehaa

This is an effect of a letter sliding out from an envelope on mouse hover.

It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more with jQuery to reproduce a similar effect, but it’s not a part of this tutorial.
Let’s start with the html structure:

<!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>

The idea is as follows (I tried to illustrate it in the scheme below): the #form_wrap is positioned relatively (top:0), with the envelope fixed to its bottom. The form is positioned relatively, with top:200px. The overlay is set to hidden for both form and #form_wrap. When mouse enters the #form_wrap its height and the height of form increase both of 350px, at the same time the top property of the #form_wrap changes to top:-200px.

Tag: stylish form