您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍使用css布局一个登陆表单的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
css布局制作一个登陆表单
这个案例主要制作的是一个登录表单,在这个案例中使用了box-shadow、gradient,transform和transition等属 性,其中最难的地方是输入框被咬的那部分,原本使用纯CSS3的渐变配合多背景制作,但受限于阴影,最终改变使用base的64位图像处理。详细的参考代 码吧:
HTML 结构:
<div class="box"> <form action="#" method="get"> <ul> <li> <label for="username">Email:</label><input type="text" id="username" class="username" placeholder="john.smith@strategysoft.com"/> </li> <li> <label for="password">Password:</label><input type="password" id="password" class="password" placeholder="******"/> </li> </ul> <a href="javascript:;" class="button"/><i class="icon-arrow-right"></i></a> </form> </div> CSS代码: body,ul{ margin: 0; padding: 0 } a { color: rgb(1, 124, 185); text-decoration: none; } input:focus { outline: none 0; } body{ color: #b5b5b5; font: 14px 'Arial'; } body, li:first-child:after, li:last-child:after{ background-image: url(data:image/png;base64,…);/**/ } .box{ position: relative; width: 384px; height: 140px; margin: 50px auto; } .box li{ list-style-type: none; margin-bottom: 10px; border-radius: 5px; overflow: hidden; position: relative; height: 42px; } .box li input{ box-shadow:inset 0 0 5px rgba(0,0,0,.5),-1px 1px 0 rgba(255,255,255,.05); border:0 none; padding:8px 5px 5px; border-radius: 5px; width:300px; height: 28px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; background: rgba(0,0,0,.1); color: #fff; } .box li:first-child:after, .box li:last-child:after{ position: absolute; width: 50px; height: 50px; content: ""; border-radius: 25px; z-index: 2; right: -23px; box-shadow: 0 0 8px rgba(0,0,0,.5); } ::-webkit-input-placeholder { color:#fff; font-weight: bold; } .box li:first-child:after{ top: 15px; } .box li:last-child:after{ bottom:15px; } .box label{ width: 70px; display: inline-block; text-align: right; } .box span{ display: block; color: #6296b4; padding-left: 75px; } .button{ position: absolute; top: 24px; right: -30px; width: 44px; height: 44px; border-radius: 22px; border:1px solid #00a1d2; background: -webkit-linear-gradient(top,#029ecd,#0d7796); color: #fff; text-shadow:1px 1px 0 #666; box-shadow:0 0 0 5px #2c2c2c; z-index: 3; text-align: center; line-height: 46px; -webkit-transition: all 0.28s ease-in; -moz--transition: all 0.28s ease-in; } .button:hover{ -webkit-transform:rotate(90deg); } @font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot'); src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } .icon-arrow-right:before { font-family: FontAwesome; font-weight: normal; font-size: 26px; font-style: normal; display: inline-block; text-decoration: inherit; content: "\f061"; }
以上是使用css布局一个登陆表单的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。