遵循這個步驟，循序漸進的過程，完全擺脫了HTML5和CSS3創建自己的時尚的接觸形式。我們將用幾個方便的新功能在HTML5添加很酷的功能，我們的形式，同時使用酷CSS3屬性代碼重新在我們的Photoshop概念純粹。
設計，我們將建立功能豐富的接口的所有的東西，使梯度，突出和陰影！我們將首先在Photoshop創建一個可視化的概念，但是當它涉及到建築形式，我們將重新HTML5和CSS3每效果。
PSD的概念
打開Photoshop，創建一個新的文檔。添加暗淡藍色漸變的背景，再畫一個矩形的中心，包含形式。
使用Photoshop圖層樣式添加一個微妙的陰影，在30％左右的不透明度和使用一個非常淺灰色薄1px的中風。
添加標題的設計，使用深藍色色板。通過調整陰影設置的插圖效果，沿底邊文本創建一個1px的淺灰色輪廓，美化這個文本。
每個標籤上使用相同的字體造型，然後繪製一個圓角矩形與5PX圓角半徑，以創建一個輸入字段。添加柔軟的內陰影，增加深度的設計。
複製的元素，奠定了一系列的輸入字段，那麼稍大的文本區域的形式。
修改輸入字段的一個可視化領域將如何尋找在使用時。給它較輕的藍色疊加起來的文字與插圖的陰影風格。使用陰影的功能，所以影子出現的文本（不是內內陰影）以外。請記住，取消選中“使用全局光選項，所以-90度角也不會影響其他所有的梯度。
新增線路等領域內的文本代表佔位符，但給他們一個深藍色的填寫，以降低對輸入字段的對比。
繪製一個圓角矩形工具，並帶有漸變的風格，薄1px的筆觸和微妙的陰影較小的按鈕形狀。
現在是完整的視覺概念。作爲背景圖片，我們不會使用任何圖形，但私營部門將重新CSS設計時得心應手十六進制顏色代碼參考。
HTML5的結構
每一個web項目開始與HTML結構。在這裏，我們將使用一些花哨的HTML5特性設計來調劑。奠定了一個DOCTYPE的基本文件和CSS樣式錶鏈接結構。房子內contaning格的聯繫方式，以便我們可以在演示中心。每個標籤元素應該有一個屬性，它涉及到每個ID 輸入字段-這提高了無障礙的形式，並允許用戶點擊標籤激活正確的領域。一個新的HTML5功能，我們正在做的是使用佔位符屬性。只需輸入你想要的信息，它會出現在每一個領域，當用戶有重點，在這一領域的文本自動清零。此功能目前只支持Safari和Chrome，但很快就出現在Firefox4。
CSS樣式
CSS樣式表設置與復位，以消除任何瀏覽器默認的基本文件，然後身體是藍色漸變，使用CSS3。目前不同的代碼是必需的WebKit和Mozilla，但方便的CSS3的梯度發生器網站，有助於節省時間。
包含的div給出具體的尺寸和使用保證金：0汽車集中起來，然後從Photoshop中的陰影和中風箱被複制陰影和邊界。
基本的CSS字體樣式匹配文本的概念，然後對CSS3 文字陰影屬性複製底邊加入1px的亮點插圖的文字效果。
繼續，標籤元素都給予類似的造型，H1，然後輸入元素樣式與尺寸和填充匹配Photoshop的概念。CSS3的梯度來發揮作用，再次重新內心的陰影效果，只需調整漸變的位置處理可以創建微妙的陰影的印象。
HTML5的佔位符，也可以有針對性的使用WebKit和Mozilla的供應商特定的CSS。這些佔位符的顏色挑選顏色，從PSD的概念。
輸入元素上使用的CSS可以直接複製到textarea的，唯一的區別是高度尺寸較大。
爲用戶提供視覺反饋，當輸入元素活躍的：重點僞選擇器可用於給不同領域的CSS樣式。這裏的CSS3的梯度用淡藍色的顏色調整。
submit按鈕將當前輸入字段上使用的通用CSS樣式，所以這一領域的目標，特別是類型=提交]先進的選擇是用來附加獨特的造型這個特別的元素。這樣的造型，包括不同的寬度和高度，一個新的漸變背景，一個微妙的方塊陰影和薄1px邊框。光標：指針，然後添加按鈕似乎顯示光標樣式的“指針”的點擊元素時徘徊。
完整的代碼
的HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Contact Form</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="contact"> <h1>Send an email</h1> <form action="#" method="post"> <fieldset> <label for="name">Name:</label> <input type="text" id="name" placeholder="Enter your full name" /> <label for="email">Email:</label> <input type="email" id="email" placeholder="Enter your email address" /> <label for="message">Message:</label> <textarea id="message" placeholder="What's on your mind?"></textarea> <input type="submit" value="Send message" /> </fieldset> </form> </div> </body> </html>
的CSS
body, div, h1, form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
html {
height: 100%;
}
body {
background: #728eaa;
background: -moz-linear-gradient(top, #25303C 0%, #728EAA 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
font-family: sans-serif;
}
#contact {
width: 430px; margin: 60px auto; padding: 60px 30px;
background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;
}
h1 {
font-size: 35px; color: #445668; text-transform: uppercase;
text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2;
}
label {
float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
text-align: right; font-size: 16px; color: #445668;
text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
}
input {
width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
input::-webkit-input-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
textarea {
width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
textarea::-webkit-input-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
textarea:-moz-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:focus, textarea:focus {
background: #728eaa;
background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa)); /* webkit */
}
input[type=submit] {
width: 185px; height: 52px; float: right; padding: 10px 15px; margin: 0 15px 0 0;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
border: 1px solid #556f8c;
background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); /* webkit */
cursor: pointer;
}
最後HTML5/CSS3表格
在瀏覽器中預覽最終的網頁，看到的形式完全呈現在HTML和CSS。Safari和Chrome等瀏覽器會看到每一個細節，而Firefox會看不到，直到釋放的Firefox 4中的佔位符。造型會慢慢降低，因爲我們通過Internet Explorer去，直到我們看到一個基本的和平面的形式，但整體功能仍然是可用的和訪問。
