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>
<ul>
<li><input type="text" value="Your Name"/></li>
<li><input type="text" value="Email Address"/></li>
<li><textarea rows="5"> Comments </textarea></li>
</ul>
<input type="button" class="button" value="Send" />
</form>


The CSS



.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;

float:left;
clear:both
}
.css3Form input, .css3Form textarea
{
margin:0;
width:300px;
padding: 8px 10px;
font-size:16px;
color:#b3b3b3;
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
{
width:150px;
border:solid 1px #bababa;
color:#363636;
font-weight:bold;
font-size:18px;
border-bottom-color:#363636;
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:



Comments

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

Recent Comments

Sunshine Eco Cleaning Services said:

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

sai krishna said:

We as a team of real-time industrial experience with a lot of knowledge in developing applications in python programming ...

sai krishna said:

We as a team of real-time industrial experience with a lot of knowledge in developing applications in python programming ...

saipallavi@12345 said:

hai sir nice content

showbox app download said:

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks ...

vijay naidu said:

Thank you for the Article Submission. have a great experenced from this content <a href="https://www.techtrainees.com/rpa-training-in-hyderabad/">RPA ...

Ashok said:

Thankyou for submitting great helpful information articles . <a href="https://www.techtrainees.com/rpa-training-in-hyderabad/"> ...

Akhila Gunturu said:

Thanks for the article .Its very informative.. <a href="https://www.digitalgyan.in/">digital-marketing-course-in-hyderabad/</a> <a ...

Barsha rani Bohidar said:

Thanks alot for the meaningful article. <a href="https://www.digitalgyan.in/">digital-marketing-course-in-hyderabad/</a> <a ...

SyntaxHighlighter.config.stripBrs=true;