使用 HTML5 和 CSS3 制作登录页面完整步骤

标签: HTML 5技术概览 CSS3 HTML5 | 发表时间:2011-09-22 11:16 | 作者:admin Amo
出处:http://www.mhtml5.com

本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程。

View demo

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form id="login">
 
 
 
<h1>Log In</h1>
 
 
 
<fieldset id="inputs">
<input id="username" type="text" />
<input id="password" type="password" /></fieldset>
 
 
 
<fieldset id="actions">
<input id="submit" type="submit" value="Log in" />
        <a>Forgot your password?</a><a>Register</a></fieldset>
 
 
</form>

所用到的 HTML5 的特性:

  • placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失
  • required – 指定该输入元素是否必须提供
  • autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点
  • type=”password” – 指定密码输入(非HTML5专有)

CSS

在这里我们用到了 CSS3 的一些专有属性,包括:

Box-shadow 可以帮我们制作效果很好的边框阴影

 

1
2
3
4
5
6
7
8
9
10
#login
{
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,
          0 7px 0 rgba(0, 0, 0, .2);
}

Stitch effect (缝效果)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#login
{
    position: absolute;
    z-index: 0;
}
 
#login:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}

Subtle gradient lines (微妙的渐变线)

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
h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}
 
h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;
}
 
h1:after
{
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);
    right: 0;
}
 
h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

最终结果

View demo

结论

在一些老的浏览器上也表现不错,下图是在IE8下的效果:

来源:开源中国

相关 [html5 css3 制作] 推荐:

使用 HTML5 和 CSS3 制作登录页面完整步骤

- Amo - HTML5研究小组
本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程. 所用到的 HTML5 的特性:. placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失. required – 指定该输入元素是否必须提供. autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点.

【转载】使用HTML5/CSS3快速制作便签贴特效

- - HTML5研究小组
本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:. (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!). 注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果.

HTML5+CSS3+jQuery制作视频播放器完全指南

- - 博客 - 伯乐在线
导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash. 虽然国内还没有完全普及HTML5 浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中. 本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器.

【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

- - HTML5研究小组
在本教程中,我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能. 【e800编译】在本教程中,我们将完成一个不错的基于. jQuery和Quicksand插件的HTML5portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久,一直没把这个文件夹分享出来. 这是我去年第四季度里做的,里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档,还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究,没有深入到应用中去. 不过,当做工具来使用,和入门文档,还是不错的. 特别是其中的 HTML5 JS API 文档.

HTML5 和 CSS3 书籍推荐

- - 我爱水煮鱼
HTML5 和 CSS3 是下一代 Web 开发标准,无论是针对内容结构还是媒体,HTML5 都引进了各种新元素. 今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3,学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web 设计和开发人员的当务之急. 现在网上已经有很多关于 HTML5 和 CSS3 的网站,包括介绍、教程以及使用技巧等等.

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

22个HTML5和CSS3表单教程

- 幻幽 or A書 - 伯乐在线 -博客
  利用HTML5和CSS3,还有一些出色的说明文档,你可以做些有创造力的网页表单. 因此,本文整理综合了22个CSS3表单教程.   点击各个小标题下方图片,即可进入相应英文教程.   你可能对以下文章也感兴趣.   成为一个顶级设计师的8个秘诀  .   10个令人印象深刻的JavaScript动画效果网站.