武林網(www.49028c.com)文章簡介：在本文中，我們將使用HTML和CSS創建一個傳統手寫風格的聯系人表單，示例會用到初中級CSS技術來創建信紙的外觀，然后使用CSS的@font-face屬性將數碼文字轉換成手寫風格。

在本文中，我們將使用HTML和CSS創建一個傳統手寫風格的聯系人表單，示例會用到初中級CSS技術來創建信紙的外觀，然后使用CSS的@font-face屬性將數碼文字轉換成手寫風格。希望本教程對你有所幫助。

我們創建的表單使用了線條紋理作為背景，投影的巧妙使用使得紙張立體感強，讓人印象深刻。標題和表單區域的內容依舊使用數碼文字，但是，我們用點狀線取代常用的矩形表單區域，這些位置的文字選用草書字體，給大家呈現出手寫的書信風格。

用Photoshop制作素材圖片

在開始寫代碼之前，使用Photoshop來創作后面所需的素材圖片。首先為背景添加雜色，數量設為：2%，選擇隨機和單色。

在畫布中央繪制一個白色矩形，在上面畫一條1像素的水平線，并用淺藍色填充，作為信紙的背景紋理。

按住ALT鍵，同時按住鼠標左鍵進行復制，然后按住Shift鍵，移動復制4次，這樣的信紙的紋理就做好了。

在信紙的下面圖層繪制一個黑色矩形。這是用來實現信紙的卷曲投影效果的。

為矩形應用高斯模糊（Gaussian Blur），使用CMD+T（譯者注：蘋果電腦的鍵盤才有CMD鍵，其它鍵盤可使用Ctrl+T）對圖像進行自由變換，鼠標右擊選擇扭曲（Distort）隱藏矩形底部的角。