Create a Css3 contact form

In this Code, Francis show us how to create a contact form using Css3 to change the style of the html elements

The markup

<form class="css3Form">
<h1>Contact me</h1>
<li><input type="text" value="Your Name"/></li>
<li><input type="text" value="Email Address"/></li>
<li><textarea rows="5"> Comments </textarea></li>
<input type="button" class="button" value="Send" />


.css3Form ul li
margin:10px 0;
box-shadow: 1px 1px 0 0 #949494;
-moz-box-shadow: 1px 1px 0 0 #949494;
-webkit-box-shadow: 1px 1px 0 0 #949494;
border-radius: 18px 18px;
-moz-border-radius: 18px 18px;
-webkit-border-radius: 18px 18px;

.css3Form input, .css3Form textarea
padding: 8px 10px;
border:solid 1px #585858;
text-shadow: 1px 1px 0 #4b4b4b;

border-radius: 18px 18px;
-moz-border-radius: 18px 18px;
-webkit-border-radius: 18px 18px;

box-shadow: inset 1px 1px 3px 0 #000;
-moz-box-shadow: inset 1px 1px 3px 0 #000;
-webkit-box-shadow: inset 1px 1px 3px 0 #000;

background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));

.css3Form .button
border:solid 1px #bababa;
background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

text-shadow: 1px 1px 0 #9d9d9d;
Author: N/A - Source

Sponsored Links:


Leave a comment
(Will not be shown on the site)

Recent Comments

sathya ramesh said:

Great post and informative was awesome to read, thanks for sharing this great content to my vision. Good discussion. ...

Balaji said:

Get the best Automation Anywhere Training in Chennai from Hope Tutors at affordable fees.

Spoken English Classes in Chennai said:

You are an amazing writer. The content is extra-ordinary. Reading your article gives me an inspiration. Thanks for sharing. <a ...

kavi said:

Great post! I am actually getting ready to across this information, It's very helpful for this blog. Also great with all ...

sathya said:

Neat and fruitful presentation!! I thouroughly enjoyed your article. I was searching the post like you wrote. Thanks for ...

kesar price 10 Gm said:

Thanks for Such a Lovely Information

venu said:

Thanks for sharing this amazing article. You are an awesome writer. Waiting for your future posts. ...

amsaleka said:

Wow!! Really a nice Article. Thank you so much for your efforts. Definitely, it will be helpful for others. I would like to ...

pugal said:

Nice blog. Really very useful....tanq for sharing and keep sharing useful information with us.

Chris Lynn said:

Hi Very Nice Blog I Have Read Your Post It Is Very Informative And Useful Thanks For Posting And Sharing With Us. ...