原始出处http://chenjinfei.blog.51cto.com/2965201/774865
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <meta http-equiv="description" content="运用CSS3和CSS滤镜做的精美的登录界面，无用到图片的喔！">
  6. <meta http-equiv="author" content="chenjinfei">
  7. <meta http-equiv="date" content="2012-2-6">
  8. <title>登录</title>
  9. <link rel="stylesheet" href="style/common/common.css">
  10. <style type="text/css">
  11. body {
  12. margin:0;
  13. padding:0;
  14. background-color:#E4E8EC;
  15. }
  16. .wrap {
  17. margin:150px auto;
  18. width:380px;
  19. overflow:hidden;
  20. }
  21. .loginForm {
  22. box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2);
  23. position:absolute;
  24. z-index:0;
  25. background-color:#FFF;
  26. border-radius:4px;
  27. height:250px;
  28. width:380px;
  29. background: -webkit-gradient(linear, left top, left 24, from(#EEE), color-stop(4%, #FFF), to(#EEE));
  30. background: -moz-linear-gradient(top, #EEE, #FFF 1px, #EEE 24px);
  31. background: -o-linear-gradient(top, #EEEEEE, #FFFFFF 1px, #EEEEEE 24px);
  32. }
  33. .loginForm:before {
  34. content:'';
  35. position:absolute;
  36. z-index:-1;
  37. border:1px dashed #CCC;
  38. top:5px;
  39. bottom:5px;
  40. left:5px;
  41. right:5px;
  42. box-shadow: 0 0 0 1px #FFF;
  43. }
  44. .loginForm h1 {
  45. text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
  46. text-transform:uppercase;
  47. text-align:center;
  48. color:#666;
  49. line-height:3em;
  50. margin:16px 0 20px 0;
  51. letter-spacing: 4px;
  52. font:normal 26px/1 Microsoft YaHei, sans-serif;
  53. }
  54. fieldset {
  55. border:none;
  56. padding:10px 10px 0;
  57. }
  58. fieldset input[type=text] {
  59. background:url(style/default/images/user.png) 4px 5px no-repeat;
  60. }
  61. fieldset input[type=password] {
  62. background:url(style/default/images/password.png) 4px 5px no-repeat;
  63. }
  64. fieldset input[type=text], fieldset input[type=password] {
  65. width:100%;
  66. line-height:2em;
  67. font-size:12px;
  68. height:24px;
  69. border:none;
  70. padding:3px 4px 3px 2.2em;
  71. width:300px;
  72. }
  73. fieldset input[type=submit] {
  74. text-align:center;
  75. padding:2px 20px;
  76. line-height:2em;
  77. border:1px solid #FF1500;
  78. border-radius:3px;
  79. background: -webkit-gradient(linear, left top, left 24, from(#FF6900), color-stop(0%, #FF9800), to(#FF6900));
  80. background: -moz-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px);
  81. background:-o-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px);
  82. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900');
  83. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900')";
  84. height:30px;
  85. cursor:pointer;
  86. letter-spacing: 4px;
  87. margin-left:10px;
  88. color:#FFF;
  89. font-weight:bold;
  90. }
  91. fieldset input[type=submit]:hover {
  92. background: -webkit-gradient(linear, left top, left 24, from(#FF9800), color-stop(0%, #FF6900), to(#FF9800));
  93. background: -moz-linear-gradient(top, #FF9800, #FF6900 0, #FF9800 24px);
  94. background:-o-linear-gradient(top, #FF6900, #FF6900 0, #FF9800 24px);
  95. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800');
  96. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800')";
  97. }
  98. .inputWrap {
  99. background: -webkit-gradient(linear, left top, left 24, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
  100. background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
  101. background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
  102. border-radius:3px;
  103. border:1px solid #CCC;
  104. margin:10px 10px 0;
  105. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF');
  106. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF')";
  107. }
  108. fieldset input[type=checkbox] {
  109. margin-left:10px;
  110. vertical-align:middle;
  111. }
  112. fieldset a {
  113. color:blue;
  114. font-size:12px;
  115. margin:6px 0 0 10px;
  116. text-decoration:none;
  117. }
  118. fieldset a:hover {
  119. text-decoration:underline;
  120. }
  121. fieldset span {
  122. font-size:12px;
  123. }
  124. </style>
  125. <!--为了让IE支持HTML5元素，做如下操作：-->
  126. <!--[if IE]>
  127. <script type="text/javascript">
  128. document.createElement("section");
  129. document.createElement("header");
  130. document.createElement("footer");
  131. </script>
  132. <![endif]-->
  133. </head>
  134. <body>
  135. <div class="wrap">
  136. <form action="#" method="post">
  137. <section class="loginForm">
  138. <header>
  139. <h1>登录</h1>
  140. </header>
  141. <div class="loginForm_content">
  142. <fieldset>
  143. <div class="inputWrap">
  144. <input type="text" name="userName" placeholder="邮箱/会员帐号/手机号" autofocus required>
  145. </div>
  146. <div class="inputWrap">
  147. <input type="password" name="password" placeholder="请输入密码" required>
  148. </div>
  149. </fieldset>
  150. <fieldset>
  151. <input type="checkbox" checked="checked">
  152. <span>下次自动登录</span>
  153. </fieldset>
  154. <fieldset>
  155. <input type="submit" value="登录">
  156. <a href="#">忘记密码？</a> <a href="#">注册</a>
  157. </fieldset>
  158. </div>
  159. </section>
  160. </form>
  161. </div>
  162. </body>
  163. </html>

运用HTML5+CSS3和CSS滤镜做的精美的登录界面的更多相关文章

  1. sencha做个简单的登录界面

    很多人都在群里问要一个好看的登录界面,我表示很无奈,哪有好看的,每个人的要求不一样,要好看的只有自己做. 下面是我自己整理的一个通用版的登录界面,稍做修改,很容易能变成你想要的界面, 不说废话,直接上 ...

  2. 假设做一个精美的Login界面(攻克了一EditText自带clear的功能,相似iphone的UITextField)

    先上图:     XML为: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  3. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  4. 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  5. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  6. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  7. HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

    前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...

  8. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  9. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

随机推荐

  1. 2019/01/17 基于windows使用fabric将gitlab的文件远程同步到服务器(git)

    觉得django项目把本地更新push到gitlab,再执行fabric脚本从gitlab更新服务器项目挺方便的,当然从本地直接到服务器就比较灵活. 2019/01/17 基于windows使用fab ...

  2. Android Studio 一直卡在building解决办法

    1.随便找一个你能运行的as项目 2.打开gradle-wrapper.properties,文件目录:项目/gradle/wrapper/gradle-wrapper.properties 3.复制 ...

  3. lanmp环境一键安装

    yum install -y wgetwget http://dl.wdlinux.cn/files/lanmp_v3.2.tar.gztar zxvf lanmp_v3.2.tar.gzsh lan ...

  4. Coprime Arrays CodeForces - 915G (数论水题)

    反演一下可以得到$b_i=\sum\limits_{d=1}^i{\mu(i)(\lfloor \frac{i}{d} \rfloor})^n$ 整除分块的话会T, 可以维护一个差分, 优化到$O(n ...

  5. ASP.NET Core WebAPI 开发-新建WebAPI项目 转

    转 http://www.cnblogs.com/linezero/p/5497472.html ASP.NET Core WebAPI 开发-新建WebAPI项目   ASP.NET Core We ...

  6. Git冲突：commit your changes or stash them before you can merge.

    用git pull来更新代码的时候,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...

  7. GitHub学习三-远程版本库更新与提交

    1.远程版本库更新 一般来说,将本地与远程相关联之后,首先将数据从远程更新下来再上传比较好. 输入 git pull origin master 如果新建版本库的话勾选了初始化包含readme.md, ...

  8. echarts的基本使用

    echarts的基本使用 官网:http://echarts.baidu.com/index.html ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移 ...

  9. py-faster R-CNN 用于训练自己的数据（1）

    官方给出的faster R-CNN的源码python版:https://github.com/rbgirshick/py-faster-rcnn 先来分析一下 整个文件,根目录下的文件 caffe-f ...

  10. nginx 隐藏 index.php 和 开启 pathinfo 模式的配置

    nginx 通过 location 的规则匹配将 php 转发给 php-fpm 处理后获取结果然后返回给客户端,转发模式可以通过 unix sock 或 tcp socket 方式.百度了好多文章我 ...