原始出处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. 20170914xlVBA通讯公司分类汇总

    Sub 租房() Dim Wb As Workbook Dim Sht As Worksheet Dim OpenWb As Workbook Dim OpenSht As Worksheet Dim ...

  2. 创建gitlab ssh 密钥

    SSH代表用于管理网络,操作系统和配置的Secure Shell或Secure Socket Shell,并且每次都不需要使用用户名和密码即可验证GitLab服务器. 您可以设置SSH密钥以提供计算机 ...

  3. 使用telnet模拟邮件的收发

    smtp协议是一个简单的邮件传输协议,利用它我们可以将邮件发送给别人,这里将通过telnet这个程序利用smtp协议从网易向gmail发送一封邮件 基本步骤如下: 1.使用telnet连接smtp服务 ...

  4. centos7 --kubeadm安装

    One or more machines running one of: Ubuntu 16.04+ Debian 9 CentOS 7 RHEL 7 Fedora 25/26 (best-effor ...

  5. 自定义alert弹框，title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  6. leetcode-algorithms-18 4Sum

    leetcode-algorithms-18 4Sum Given an array nums of n integers and an integer target, are there eleme ...

  7. java设计模式之生产者/消费者模式

    什么是生产者/消费者模式? 某个模块负责产生数据,这些数据由另一个模块来负责处理(此处的模块是广义的,可以是类.函数.线程.进程等).产生数据的模块,就形象地称为生产者:而处理数据的模块,就称为消费者 ...

  8. rac 配置dg完成版

    ********************************************************************************************集群环境下的da ...

  9. PAT 1031 Hello World for U

    1031 Hello World for U (20 分)   Given any string of N (≥) characters, you are asked to form the char ...

  10. 函数使用十二：BAPI_MATERIAL_BOM_GROUP_CREATE（CS61）

    REPORT ZSM_CREATE_SIMPLEBOM.* This code will create a material BoM for the material* MAINMATERIAL wi ...