Hôm nay mình sẽ hướng dẫn các bạn thiết kế một form login mang phong cách mới nhìn rất lạ mắt.
Hình ảnh demo form login
thiet ke form login
Thiết kế HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="formCont"> <div class="brTop"></div> <form action="#"> <div class="inputForm"> <span class="prefix"><span class="entypo-user"></span></span> <input type="text" placeholder="Username"/> </div> <br /> <div class="inputForm"> <span class="prefix"><span class="entypo-key"></span></span> <input type="password" placeholder="Password" /> <span class="sufix"><span class="entypo-lock"></span></span> </div> </form> <div class="triangle"></div> <h2>SIGN IN</h2> <span class="flRight">forgot?</span> </div> |
Design bằng CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
@import url(http://weloveiconfonts.com/api/?family=entypo); @import url(http://fonts.googleapis.com/css?family=Maven+Pro); /* zocial */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Maven Pro', sans-serif; } body { background: #4f6d82; } h2 { color: #95a5a6; margin-left: 20px; font-size: 30px; margin-top: -10px; font-weight: normal; display: inline-block; } .formCont { width: 400px; margin: 50px auto; } form { background: #2c3e50; padding: 20px; } input { border: 0; padding: 10px; } input:focus { outline-color: rgba(0, 0, 0, 0); } .inputForm { width: 100%; background: white; border-radius: 3px; overflow: hidden; } .prefix { display: inline-block; position: relative; width: 50px; height: 100%; padding: 10px; background: #dedee0; text-align: center; color: #777777; } .sufix { display: inline-block; position: relative; float: right; width: 50px; height: 100%; padding: 10px; background: #dedee0; text-align: center; color: #777777; } .brTop { border-radius: 3px 3px 0px 0px; height: 5px; background: #16a085; background: -moz-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #16a085), color-stop(40%, #1abc9c), color-stop(100%, #2980b9)); background: -webkit-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%); background: -o-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%); background: -ms-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%); background: linear-gradient(135deg, #16a085 0%, #1abc9c 40%, #2980b9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#16a085', endColorstr='#2980b9',GradientType=1 ); } /* .brTop { height: 8px; background: #c4e17f; border-radius: 3px 3px 0 0; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); } */ .triangle { position: relative; top: -21px; left: 50px; margin: 0; height: 0; width: 0; border-top: 15px solid #2c3e50; border-bottom: 15px solid transparent; border-right: 15px solid transparent; transform: rotate(225deg); } .flRight { float: right; margin-right: 25px; text-decoration: underline; color: #95a5a6; } |
Chúc bạn thành công nhé
