css3制作日历风格登陆表单

赵人无名

HTML 结构

1. <div class="content">
   
2. <!-- ===用来制作纸张层叠==== -->
   
3. <div class="form-wrapper">
   
4. <!-- ====制作链条效果=== -->
   
5. <div class="linker">
   
6. <!-- ==== 每个链条 ==== -->
   
7. <span class="ring"></span>
   
8. <span class="ring"></span>
   
9. <span class="ring"></span>
   
10. <span class="ring"></span>
    
11. <span class="ring"></span>
    
12. </div>
    
13. <!-- ==== 登录表单 ==== -->
    
14. <form class="login-form" action="#" method="post">
    
15. <input type="text" name="username" placeholder="username" />
    
16. <input type="password" name="password" placeholder="password" />
    
17. <button type="submit">Log in</button>
    
18. </form>
    
19. </div>
    
20. </div>

复制代码

       这样的结构，对大家来说都很简单，基中“div.form-wrapper”主要用来实现表单纸张层叠效果。其中最为关键的是链条效果，这里使用了一个div加上5个span实现：

1. <!-- ====制作链条效果=== -->
   
2. <div class="linker">
   
3. <!-- ==== 每个链条 ==== -->
   
4. <span class="ring"></span>
   
5. <span class="ring"></span>
   
6. <span class="ring"></span>
   
7. <span class="ring"></span>
   
8. <span class="ring"></span>
   
9. </div>

复制代码

CSS样式


       下面分步来看实现的样式代码：

1. /*基本布局样式*/
   
2. body {
   
3. background-image:url(bg.jpg);
   
4. }
   
5. .content {
   
6. width:680px;
   
7. height:320px;
   
8. margin:50px auto;
   
9. }

复制代码

1. /*表单容器样式，类似于日历风格*/
   
2. .form-wrapper {
   
3. margin:32px auto;
   
4. width:264px;
   
5. height:253px;
   
6. position:relative;
   
7. border:1px solid rgb(197,200,204);
   
8. background-color:rgb(248,249,250);
   
9. text-align:center;
   
10. border-radius:5px;/*圆角*/
    
11. box-shadow:0 1px 0 rgb(255,255,255), 0 2px 0 rgb(197,200,204), 0 3px 0 rgb(255,255,255), 0 4px 0 rgb(197,200,204);/*纸张层叠效果*/
    
12. }
    
13. /*制作链条顶部背景区域*/
    
14. .form-wrapper:before {
    
15. content:"";
    
16. display:block;
    
17. height:37px;
    
18. border-bottom:1px solid rgb(197,200,204);
    
19. border-radius:5px 5px 0 0;
    
20. box-shadow:inset 2px 2px 0 rgb(255,255,255);
    
21. }

复制代码

       上面代码是一个关键之处，使用box-shadow的多阴影模仿制作多张纸层叠效果。

1. /*表单元素样式制作*/
   
2. .form-wrapper .login-form {
   
3. padding-top:40px;
   
4. box-shadow:inset 2px 0 0 rgb(255,255,255);/*内阴影*/
   
5. }
   
6. /*登录框样式*/
   
7. .form-wrapper input[name="username"],
   
8. .form-wrapper input[name="password"] {
   
9. height:40px;
   
10. width: 200px;
    
11. margin:0 auto;
    
12. padding-left:15px;
    
13. display:block;
    
14. border:1px solid rgb(197,200,204);
    
15. background-color:rgb(228,230,233);
    
16. }
    
17. .form-wrapper input[name="username"]{
    
18. border-bottom:none;
    
19. border-radius:5px 5px 0 0;
    
20. box-shadow:inset 0 1px 0 rgb(212,214,217);
    
21. }
    
22. .form-wrapper input[name="password"] {
    
23. border-radius:0 0 5px 5px;
    
24. }
    
25. /*按钮效果*/
    
26. .form-wrapper button[type="submit"] {
    
27. margin-top:25px;
    
28. width:215px;
    
29. height:44px;
    
30. color:#fff;
    
31. font-size:20px;
    
32. border:none;
    
33. border-top:1px solid rgb(190,143,48);
    
34. position:relative;
    
35. /*利用双背景制作垂直渐变色边框*/
    
36. background:-*-linear-gradient(top,rgb(228,182,88),rgb(218,149,78)) 1px 1px no-repeat,
    
37. -*-linear-gradient(top,rgb(190,143,48),rgb(160,106,32)) left top no-repeat;
    
38. background-size:213px 41px,215px 43px;
    
39. border-radius:5px;
    
40. box-shadow:inset 0 1px 0 rgb(242,220,175);
    
41. text-shadow:1px 1px 0 rgb(138,100,50);
    
42. transition:color 300ms linear;
    
43. }
    
44. .form-wrapper button[type="submit"]:hover {
    
45. color:rgb(195,188,81);
    
46. background:-*-linear-gradient(top,rgb(195,99,81),rgb(196,84,64)) 1px 1px no-repeat,
    
47. -*-linear-gradient(top,rgb(190,143,48),rgb(160,106,32)) left top no-repeat;
    
48. }

复制代码

       上面这段代码主要是用来制作表单元素的样式。

1. /*日历链条和环的制作*/
   
2. .form-wrapper .linker {
   
3. position:absolute;
   
4. width:240px;
   
5. height:40px;
   
6. top:18px;
   
7. left:10px;
   
8. }
   
9. /*上环*/
   
10. .linker .ring {
    
11. position:relative;
    
12. display:inline-block;
    
13. border:1px solid rgb(163,164,167);
    
14. background-color:rgb(220,222,225);
    
15. height:12px;
    
16. width:12px;
    
17. border-radius: 6px;
    
18. margin-right:33px;
    
19. }
    
20. .linker .ring:last-child {
    
21. margin-right:0;
    
22. }
    
23. /*下环*/
    
24. .linker .ring:before {
    
25. content:"";
    
26. position:absolute;
    
27. bottom:-25px;
    
28. left:-1px;
    
29. border:1px solid rgb(163,164,167);
    
30. background-color:rgb(220,222,225);
    
31. height:12px;
    
32. width:12px;
    
33. border-radius: 6px;
    
34. }
    
35. /*中间链条*/
    
36. .linker .ring:after{
    
37. content:"";
    
38. position:absolute;
    
39. top:2px;
    
40. left:2px;
    
41. width:6px;
    
42. height:30px;
    
43. border:1px solid rgb(202,202,202);
    
44. background-color:rgb(255,255,255);
    
45. border-radius: 3px;
    
46. }

复制代码

       这段代码是用来制作链条的效果，也是这个案例中最为关键，也是难度稍大一点的地方，灵活运用好“:before”和“:after”就可以轻意实现。到此这个效果就算是制作完成了。不知道你学会了？