原始出处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. InputSream转为String

    public static String convertStreamToString(InputStream is) { /* * To convert the InputStream to Stri ...

  2. vue项目中引入第三方框架

    element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...

  3. CRM WEB UI 03搜索界面新建按钮调到详细界面

    这个和上一个差不多,简单说下: 1.因为NEW是在创建搜索界面的时候加的,所以此时只需在结果界面重定义NEW事件: method EH_ONNEW. OP_NEW( ). endmethod. 2.结 ...

  4. oracle having sum group by 详解

    Aggregate functions (like SUM) often need an added GROUP BY functionality. 集合函数(类似SUM)经常需要用GROUP BY来 ...

  5. MySQL_插入更新 ON DUPLICATE KEY UPDATE

    平时我们在设计数据库表的时候总会设计 unique  或者 给表加上 primary key 的限制条件. 此时 插入数据的时候 ,经常会有这样的情况: 我们想向数据库插入一条记录: 若数据表中存在以 ...

  6. hdu多校1004 Distinct Values

    Distinct Values Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): ...

  7. Vue为v-html中标签添加CSS样式

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-ht ...

  8. js 日期格式： UTC GMT 互相转换

    //UTC 转指定格式日期 let date = '2018-03-07T16:00:00.000Z' console.log(moment(date).format('YYYY-MM-DD HH:m ...

  9. kali菜单中各工具功能

    一.说明 各工具kali官方简介(竖排):https://tools.kali.org/tools-listing 安装kali虚拟机可参考:https://www.cnblogs.com/lsdb/ ...

  10. Win10系列：JavaScript动画4

    上面介绍的动画效果是通过Windows动画库创建的,这里的旋转动画是通过设置页面元素的style对象的相关属性来创建,此动画的效果是将界面元素沿着指定的方向进行旋转.下面介绍style对象的几个常用属 ...