登錄形式是任何動態網站的一個重要組成部分。他們為網站用戶提供了一種機制來訪問受限制的內容(比方 會員的賬戶啊，敏感的信息啊，什么的)。今天，我將做一個包含很多像文字陰影，陰影框，線性漸變和過渡的特效的建立一個堆疊紙外觀與古朴典雅的登錄表單。最終做出來的效果如下所示
1. 創建基本的html標記
html標記我們將使用符合html5屬性的標記來聲明，里面包含<head>和<title>標記在bod標簽內，當然其中肯定也要有一個section標簽 ，這個標簽來定義內容的寬度和對齊方式，我們也定義一個CSS樣式通過給<section class="定義的類">來具體的控制樣式，然后在正文內容添加一個<form>標簽，增加兩個input文本框，分別是郵件和密碼 通過一個sumbit提交按鈕來提交，值得注意的的是我們把 input type="email"屬性，這是html5當中的聲明，並且在舊的瀏覽器當中他會自動轉換成符合舊瀏覽器的屬性
創建的html代碼如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <title>Simple Login Form</title> 6 <link rel="stylesheet" href="master.css"> 7 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> 8 </head> 9 <body> 10 <div class="wrap"> 11 <div class="stacked"> 12 <h2>Login</h2> 13 <form action="" method="post" id="login"> 14 <div class="field"> 15 <label for="email">Email</label> 16 <input type="email" name="email" id="email" class="text-input" placeholder="john@doe.com" /> 17 </div> 18 <!--field--> 19 20 <div class="field"> 21 <label for="password">Password</label> 22 <input type="password" name="password" id="password" class="text-input" placeholder="Secret Password" /> 23 </div> 24 <!--field--> 25 26 <div class="action clearfix"> 27 <input type="submit" /> 28 </div> 29 <!--action--> 30 </form> 31 </div> 32 <!--stacked--> 33 </div> 34 <!--wrap--> 35 </body> 36 </html>
創建完之后的樣式預覽
2. 添加基本的css樣式屬性
創建一個新的CSS樣式文件命名為master.css，在這個css文件當中要我要創建一些基本的CSS定義，包含body的背景圖片，對各種瀏覽器的兼容性代碼，在這個例子當中我使用開放的sans 字體關於這個字體，你可以訪問谷歌的web字體 如下面的代碼定義了body和html屬性
1 /* --------Base Styles--------- */ 2 body, html { 3 margin: 0; 4 padding: 0; 5 } 6 7 body { 8 background: url("http://images.cnblogs.com/cnblogs_com/web8cn/331616/o_bg.png") left top repeat; 9 font: 16px/1.5 "Open Sans", Helvetica, Arial, sans-serif; 10 } 11 12 div.wrap { 13 width: 400px; 14 margin: 80px auto; 15 }
3。疊紙效果
這個是最重要的一部分CSS代碼效果了
現在是開始基本的布局了，我先設計一個表格，獲得疊紙的效果，我將使用將使用:after 和:before 偽元素。這些偽元素大多用於視覺效果；
偽元素:before 被用作要展現的選擇的內容之前，偽元素:after就不用說了吧，^^
給seciton元素定義一個 stacked的類，規定 寬度是400PX 高度是300PX，此外將登錄框的背景顏色設為較深的灰色#f6f6f6，邊框設為1PX顏色是#bbb,（效果可以自己看看），這里最最要的還是邊界半徑的渲染和陰影效果，不過我這里用"-moz-"和"-webkit-"前綴屬性定義他們在不同瀏覽器的顯示效果，哈哈
邊界半徑 border-radius聲明非常簡單，用於創建圓角，寬度是3PX。box-shadow框陰影聲明的語法寫起來復雜，將要一個個的定義，廢話少說，CSS代碼如下
1 /* --------Border Radius--------- */ 2 -webkit-border-radius: 3px; 3 -moz-border-radius: 3px; 4 border-radius: 3px; 5 6 /* --------Box Shadow--------- */ 7 -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); 8 -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); 9 box-shadow: 0 0 3px rgba(0,0,0,.2);
上面的CSS代碼x和y坐標的偏移量是3PX，其次是陰影顏色的聲明，
1 .stacked { 2 background: #f6f6f6; 3 border: 1px solid #bbb; 4 height: 300px; 5 margin: 50px auto; 6 position: relative; 7 width: 400px; 8 -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); 9 -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); 10 box-shadow: 0 0 3px rgba(0,0,0,.2); 11 12 -webkit-border-radius: 3px; 13 -moz-border-radius: 3px; 14 border-radius: 3px; 15 }
現在，我們已經創造了基本的邊界框的形式，下面開始創建偽元素前后的代碼
1 .stacked:after, 2 .stacked:before { 3 background: #f6f6f6; 4 border: 1px solid #aaa; 5 bottom: -8px; 6 content: ''; 7 height: 250px; 8 left: 2px; 9 position: absolute; 10 width: 394px; 11 z-index: -10; 12 -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); 13 -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); 14 box-shadow: 0 0 3px rgba(0,0,0,.2); 15 16 -webkit-border-radius: 3px; 17 -moz-border-radius: 3px; 18 border-radius: 3px; 19 } 20 21 .stacked:before { 22 bottom: -14px; 23 left: 5px; 24 width: 388px; 25 -webkit-border-radius: 3px; 26 -moz-border-radius: 3px; 27 border-radius: 3px; 28 29 -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); 30 -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5); 31 box-shadow: 0 0 15px rgba(0,0,0,0.5); 32 }
代碼：after和偽元素:before幾乎完全類似。唯一要注意的是，這些偽元素絕對定位與邊界框。每個偽元素逐步降低幾個像素，來呈現一種疊紙的外觀
4。輸入字段
在HTML標記中，我添加了一個“文字輸入”的電子郵件字段和密碼字段的類，下面對這些類進行聲明
1 form input.text-input { 2 outline: 0; 3 display: block; 4 width: 330px; 5 padding: 8px 15px; 6 border: 1px solid gray; 7 font-size: 16px; 8 font-weight: 400; 9 10 -webkit-border-radius: 25px; 11 -moz-border-radius: 25px; 12 border-radius: 25px; 13 14 box-shadow: inset 0 2px 8px rgba(0,0,0,0.3); 15 }
在這里，我再次使用邊界半徑和陰影聲明。在文本字段的情況下，邊界半徑被賦予了更高的像素，以確保更多的曲率。
5。提交按鈕
我要完成的最后一部分是submit按鈕。輸入字段類似，我會提交“按鈕的使用邊界半徑屬性25px。一個box-shadow屬性與Y-偏移量為1px，還添加了一個“內陰影”的效果.CSS代碼如下
1 form input[type='submit'] { 2 float: right; 3 padding: 10px 20px; 4 display: block; 5 cursor: pointer; 6 7 font-size: 16px; 8 font-weight: 700; 9 color: #fff; 10 text-shadow: 0 1px 0 #000; 11 background-color: #0074CC; 12 border: 1px solid #05C; 13 14 -webkit-border-radius: 25px; 15 -moz-border-radius: 25px; 16 border-radius: 25px; 17 18 background-image: -moz-linear-gradient(top, #08C, #05C); 19 background-image: -ms-linear-gradient(top, #08C, #05C); 20 background-image: -webkit-linear-gradient(top, #08C, #05C); 21 background-image: linear-gradient(top, #08C, #05C); 22 23 -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5); 24 -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5); 25 box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5); 26 }
這里要注意的最重要的是為這個按鈕添加漸變的聲明。對於這個submit按鈕，我們將增加一個線性漸變，從＃08C＃05C。這個效果就完成了，以后在用到這樣疊紙的效果你就可以下載使用了