注:本文由敏捷翻譯- 宋彩珺翻譯自Jean-Baptiste Jung的博文。如需轉載,請參照文章末尾處的宣告。
CSS3的出現,為製作更好的網頁表單帶來無數新的可能。在本文中,我收集了10種運用新技術CSS3,製作非常棒的表單的教程。
HTML5引進了類似諸如滑動條、數字旋轉器、日期選擇自定義這些實用的新表單元素。該教程會教你怎樣用HTML製作表單,並且和CSS3相得益彰。它能夠將CSS3和HTML5巧妙地結合在一起。
雖然這個教程是法語的,但是效果出人意料。對於不會法語的讀者,只需要找到原始碼,並充分利用它。
3. 使用 HTML5 & CSS3 製作一個樣式新穎的聯絡表單
我非常喜歡英國web開發人員Chris Spooner的作品。這次,他的一個實用教程,它告訴你如何創作表單並利用CSS3設計。製作表單並用CSS3去美化的實用教程。看看他的作品,是不是非常酷?
大多數搜尋表單(包括我現在正在使用的!)看起來索然無味。稍微借用CSS3,你就能將過時、無聊的表單變得非常時髦、吸引人。這是一個必讀的教程。
這個精簡的教程會告訴你如何利用CSS3的一些基本功能(比如:box-shadow),來製作一個表單。
6. 流暢的CSS3登入表單
同樣,這也是個精簡的教程,它會教你利用CSS3製作一張無插圖的簡易表單。
7. 夢幻般的CSS3表單
看,這個表單是不是非常棒?這個表單沒有使用任何圖片,只有CSS3。我強烈建議大家好好的學習這個教程以及原始碼,因為你會學到非常多精湛的技術,來製作無插圖的精美表單。
8. 簡潔個性的CSS3表單
這個表單簡易、簡潔且樣式新穎。雖然沒有什麼特別的,但在製作絕大多數網站時你會用得到這些技巧。
對於製作更為實用的表單來說,jQuery絕對不失為一個非常棒的工具。這個教程會教給你如何使用CSS3製作一個好看的表單,以及如何利用jQuery製作一個使用者介面更友好的表單。
最後一個教程同樣重要,它教你製作jQuery & CSS3 下拉選單整合表單。毫無疑問,你的客戶肯定會喜歡的!
原文:Jean-Baptiste Jung 翻譯:敏捷翻譯– 宋彩珺
如需轉載,但請註明原文/譯文出處、譯文超連結和譯者等資訊,否則視為侵權,謝謝合作!