Metro Login Form
这是一个很简单也很普通的登录表单的效果,只不过这个案例采用的是Metro的UI设计风格,当然不是Metro UI CSS中的东西,设计风格,色彩类似于Metro。另外在加载表单时,给部分元素使用了transition属性,让你在视觉上加载有动画,其在input[type="text"]得到焦点时,使用了box-shadow模仿了border效果。
HTML CODE
对于表单的结构,有各种各样的说法,仅我个来说,我比较喜欢Bootstrap的form表单结构,不过此处,藤藤使用的是自己写的结构,大家一看也明白:
CSS CODE
整个案例中的CSS并不复杂,大家想想就知道,一个普通的登录表单能难到哪去,是吧。在这个案例中,使用CSS3的知识也不是很多,第一个是使用了CSS3的属性选择器,第二个是使用了transition动画过渡属性,第三个是使用了盒子阴影box-shadow属性,第四个使用了box-sizing属性修改了box module。具体的我们一起来看看吧。
表单的基本样式,比如说大小,颜色之类的,在这里使用了一个动画属性:
使用这个属性能让你的表单在页面初次加载时,会有一个从无到有的动画过程,给人看起来不会那么生硬,而且这个属性在后面多次使用到。
设置表单元素样式时,有两个属性很关键,第一个是通过box-sizing来修改了box module的默认格式,第二就是使用了box-shadow来模仿了border效果,使用input的得到焦点时,有一个不同的效果,但又不影响box的相关参数。
所有CSS代码
演示:http://www.w3cplus.com/demo/css3/MetroLoginForm/index.html
下载:MetroLoginForm.zip
HTML CODE
对于表单的结构,有各种各样的说法,仅我个来说,我比较喜欢Bootstrap的form表单结构,不过此处,藤藤使用的是自己写的结构,大家一看也明白:
<div class="login-control">
<form action="" method="get" accept-charset="utf-8" class="form-item">
<h2>LOGIN</h2>
<div class="form-item-1">
<input type="text" name="name" id="name" placeholder="Username">
</div>
<div class="form-item-2">
<input type="password" name="pwd" value="" placeholder="Password">
</div>
<div class="form-item-3">
<input type="checkbox" name="showpwd" value="" id="showpwd" checked="checked"><label for="showpwd">Show password</label>
<a href="#" class="fr">Forgot password?</a>
</div>
<div class="form-item-4">
<input type="button" value="Sign In">
</div>
</form>
</div>
CSS CODE
整个案例中的CSS并不复杂,大家想想就知道,一个普通的登录表单能难到哪去,是吧。在这个案例中,使用CSS3的知识也不是很多,第一个是使用了CSS3的属性选择器,第二个是使用了transition动画过渡属性,第三个是使用了盒子阴影box-shadow属性,第四个使用了box-sizing属性修改了box module。具体的我们一起来看看吧。
body {
background-color: #dbdbdb;
}
.fr {
float: right;
}
.demo {
margin: 50px auto;
width: 350px;
}
.login-control {
color: #636363;
padding: 20px;
line-height: 60px;
background-color: #323232;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
表单的基本样式,比如说大小,颜色之类的,在这里使用了一个动画属性:
transition: all 300ms;
使用这个属性能让你的表单在页面初次加载时,会有一个从无到有的动画过程,给人看起来不会那么生硬,而且这个属性在后面多次使用到。
/*表单标题样式*/
.login-control h2 {
color: #f1f1f1;
font-size: 36px;
font-weight: normal;
line-height: 50px;
text-align: center;
}
/*文本框、密码框样式*/
.login-control input[type="text"],
.login-control input[type="password"] { /*使用了CSS3的属性选择器*/
width: 100%;
height: 40px;
padding: 0 2px;
border: none;
box-sizing: border-box;/*改变box module*/
transition: all 300ms;/*加载时的一个过渡动画效果*/
}
/*input得到焦点的效果*/
input:focus {
outline: 0 none;/*去掉得到焦点时外边框样式*/
box-shadow: 0 0 0 5px #00aec7;/*使用box-shadow模仿border效果*/
}
.form-item-3 {
text-align: left;
line-height: 20px;
margin-bottom: 20px;
}
/*复选框样式*/
.login-control input[type='checkbox'] {
vertical-align: middle;
margin-right: 5px;
}
/*登录按钮样式*/
.login-control input[type='button'] {
color: #fff;
font-size: 36px;
width: 100%;
height: 70px;
border: none;
background-color: #00aec7;
cursor: pointer;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
.login-control input[type='button']:hover {
background-color: #006675;
}
设置表单元素样式时,有两个属性很关键,第一个是通过box-sizing来修改了box module的默认格式,第二就是使用了box-shadow来模仿了border效果,使用input的得到焦点时,有一个不同的效果,但又不影响box的相关参数。
所有CSS代码
body {
background-color: #dbdbdb;
}
.fr {
float: right;
}
.demo {
margin: 50px auto;
width: 350px;
}
.login-control {
color: #636363;
padding: 20px;
line-height: 60px;
background-color: #323232;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
/*表单标题样式*/
.login-control h2 {
color: #f1f1f1;
font-size: 36px;
font-weight: normal;
line-height: 50px;
text-align: center;
}
/*文本框、密码框样式*/
.login-control input[type="text"],
.login-control input[type="password"] { /*使用了CSS3的属性选择器*/
width: 100%;
height: 40px;
padding: 0 2px;
border: none;
box-sizing: border-box;/*改变box module*/
transition: all 300ms;/*加载时的一个过渡动画效果*/
}
/*input得到焦点的效果*/
input:focus {
outline: 0 none;/*去掉得到焦点时外边框样式*/
box-shadow: 0 0 0 5px #00aec7;/*使用box-shadow模仿border效果*/
}
.form-item-3 {
text-align: left;
line-height: 20px;
margin-bottom: 20px;
}
/*复选框样式*/
.login-control input[type='checkbox'] {
vertical-align: middle;
margin-right: 5px;
}
/*登录按钮样式*/
.login-control input[type='button'] {
color: #fff;
font-size: 36px;
width: 100%;
height: 70px;
border: none;
background-color: #00aec7;
cursor: pointer;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
.login-control input[type='button']:hover {
background-color: #006675;
}
演示:http://www.w3cplus.com/demo/css3/MetroLoginForm/index.html
下载:MetroLoginForm.zip
【Metro Login Form】相关文章
3. CSS3 Transitions, Transforms和Animation使用简介与应用展
4. Form Follows Function:绚丽HTML5互动体验网站
6. Magí
7. 纯css3 transforms 3D文字翻开翻转3D开放式效果
10. Frog Log
本文来源:https://www.51html5.com/a915.html
上一篇:CSS3制作登录表单
下一篇:Metro UI For Block
﹝Metro Login Form﹞相关内容
- MetroRun
- Metro Icon
- TechED 2011前瞻:Metro界面采用HTML5
- 微软面向开发者公布HTML5,Metro开发技术指引
- Metro/Modern UI CSS/HTML 框架
- 不容错过的window8 metro UI风格的web资源
- Google Chrome Beta版更新带来另一个HTML5特性
- 谷歌将整合其博客平台Blogger与Google+服务
- 谷歌推出给予HTML5技术的网页版Google Catalogs功能
- HTML5云端应用大跃进:Google Android版Chrome