您的位置：首页 > 其它

使用特殊效果创建一个堆叠纸张对登录表单

2012-07-19 16:25 399 查看

登录形式是任何动态网站的一个重要组成部分。他们为网站用户提供了一种机制来访问受限制的内容(比方会员的账户啊，敏感的信息啊，什么的)。今天，我将做一个包含很多像文字阴影，阴影框，线性渐变和过渡的特效的建立一个堆叠纸外观与古朴典雅的登录表单。最终做出来的效果如下所示

1. 创建基本的html标记

html标记我们将使用符合html5属性的标记来声明，里面包含<head>和<title>标记在bod标签内，当然其中肯定也要有一个section标签，这个标签来定义内容的宽度和对齐方式，我们也定义一个CSS样式通过给<section class="定义的类">来具体的控制样式，然后在正文内容添加一个<form>标签，增加两个input文本框，分别是邮件和密码通过一个sumbit提交按钮来提交，值得注意的的是我们把 input type="email"属性，这是html5当中的声明，并且在旧的浏览器当中他会自动转换成符合旧浏览器的属性

创建的html代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Simple Login Form</title>
<link rel="stylesheet" href="master.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrap">
<div class="stacked">
<h2>Login</h2>
<form action="" method="post" id="login">
<div class="field">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="text-input" placeholder="john@doe.com" />
</div>
<!--field-->

<div class="field">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="text-input" placeholder="Secret Password" />
</div>
<!--field-->

<div class="action clearfix">
<input type="submit" />
</div>
<!--action-->
</form>
</div>
<!--stacked-->
</div>
<!--wrap-->
</body>
</html>

创建完之后的样式预览

2. 添加基本的css样式属性

创建一个新的CSS样式文件命名为master.css，在这个css文件当中要我要创建一些基本的CSS定义，包含body的背景图片，对各种浏览器的兼容性代码，在这个例子当中我使用开放的sans 字体关于这个字体，你可以访问谷歌的web字体如下面的代码定义了body和html属性

/* --------Base Styles--------- */
body, html  {
margin: 0;
padding: 0;
}

body  {
background: url("http://images.cnblogs.com/cnblogs_com/web8cn/331616/o_bg.png") left top repeat;
font: 16px/1.5 "Open Sans", Helvetica, Arial, sans-serif;
}

div.wrap  {
width: 400px;
margin: 80px auto;
}

3。叠纸效果

这个是最重要的一部分CSS代码效果了

现在是开始基本的布局了，我先设计一个表格，获得叠纸的效果，我将使用将使用

:after

和

:before

伪元素。这些伪元素大多用于视觉效果；

伪元素:before 被用作要展现的选择的内容之前，伪元素:after就不用说了吧，^^

给seciton元素定义一个 stacked的类，规定宽度是400PX 高度是300PX，此外将登录框的背景颜色设为较深的灰色#f6f6f6，边框设为1PX颜色是#bbb,（效果可以自己看看），这里最最要的还是边界半径的渲染和阴影效果，不过我这里用"-moz-"和"-webkit-"前缀属性定义他们在不同浏览器的显示效果，哈哈

边界半径 border-radius声明非常简单，用于创建圆角，宽度是3PX。box-shadow框阴影声明的语法写起来复杂，将要一个个的定义，废话少说，CSS代码如下

/* --------Border Radius--------- */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

/* --------Box Shadow--------- */
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);

上面的CSS代码x和y坐标的偏移量是3PX，其次是阴影颜色的声明，

.stacked {
background: #f6f6f6;
border: 1px solid #bbb;
height: 300px;
margin: 50px auto;
position: relative;
width: 400px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

现在，我们已经创造了基本的边界框的形式，下面开始创建伪元素前后的代码

.stacked:after,
.stacked:before {
background: #f6f6f6;
border: 1px solid #aaa;
bottom: -8px;
content: '';
height: 250px;
left: 2px;
position: absolute;
width: 394px;
z-index: -10;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.stacked:before {
bottom: -14px;
left: 5px;
width: 388px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

代码：after和伪元素:before几乎完全类似。唯一要注意的是，这些伪元素绝对定位与边界框。每个伪元素逐步降低几个像素，来呈现一种叠纸的外观

4。输入字段

在HTML标记中，我添加了一个“文字输入”的电子邮件字段和密码字段的类，下面对这些类进行声明

form input.text-input {
outline: 0;
display: block;
width: 330px;
padding: 8px 15px;
border: 1px solid gray;
font-size: 16px;
font-weight: 400;

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

在这里，我再次使用边界半径和阴影声明。在文本字段的情况下，边界半径被赋予了更高的像素，以确保更多的曲率。

5。提交按钮

我要完成的最后一部分是submit按钮。输入字段类似，我会提交“按钮的使用边界半径属性25px。一个box-shadow属性与Y-偏移量为1px，还添加了一个“内阴影”的效果.CSS代码如下

form input[type='submit']     {
float: right;
padding: 10px 20px;
display: block;
cursor: pointer;

font-size: 16px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 0 #000;
background-color: #0074CC;
border: 1px solid #05C;

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

background-image: -moz-linear-gradient(top, #08C, #05C);
background-image: -ms-linear-gradient(top, #08C, #05C);
background-image: -webkit-linear-gradient(top, #08C, #05C);
background-image: linear-gradient(top, #08C, #05C);

-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.5);
}

这里要注意的最重要的是为这个按钮添加渐变的声明。对于这个submit按钮，我们将增加一个线性渐变，从＃08C＃05C。这个效果就完成了，以后在用到这样叠纸的效果你就可以下载使用了 [b]
[/b]

Demo

Download Files

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航