织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

CSS3 创建漂亮的表单(3) 纯CSS背景渐变

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
CSS3 创建漂亮的表单(3) 纯CSS背景渐变

首先我们回顾一下当时的目标范例,简洁雅致的小 表单一个。

另外也可以先围观下mozilla.org的这篇css gradients in Firefox 3.6,从单向渐变到形变彩虹渐变...看看CSS3为我们带来了多少好东东=)

不过我们要做的没这么复杂,单向渐变就OK;下面两行代码词法分别用于Webkit和Gecko内核:

 

[css]-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )[/css]

[css]-moz-linear-gradient(<start> <angle>, <color>, <color>) [/css]

稍作解释:

Webkit:渐变需要起点<start>(X、Y)和终点<end>(X、Y), 需要起点色<from>和终点色<to>
Gecko:渐变需要起点<start>(Y)和至少两个颜 色<color>,<angle>用来控制角度,如果我们要做的是从上到下垂直的渐变,
那么不需要指 定<angle>
那么实际的代码大致是这样的:

[css]
background: -webkit-gradient(linear, left top, left bottombottom, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF);
[/css]

搞出的飞机就会是下面这个样子:

为了效果明显一些,我们暂且使用纯粹的从黑到白的渐变来演示,在最后会统一更新为设计需求中的颜色。
基础的方法有了,我们可以一点点把样式打造成需求的样式。首先我们要限定渐变的高度,这样无论是普通的文字input
还是textarea都会有相 同高度的渐变背景,而不是一变到底,如下图这种错误的样式:

我们将之前的两行代码稍作修改,将渐变高度限制为25像素,并对input和textarea使用这些样式代码:

[css]
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
}
[/css]

现在表单的背景样式大致如下面截图所示,不错:

我们还有一件事情需要做,看下范例页面会发现,元素边框和背景之间还需要1像素的留白;精细的质感全靠这1像素的留白来体现...
好,将样式代码稍做修 改:

[css]
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000),
to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px);
}
[/css]

怎么回事呢?我们说一下。第一行,我们为Webkit的样式设置了一个color-stop,位置在4%的地方,颜色为黑色,并将起始色修改为白

色;限高25像素的4%就是1像素,这样做就可以在真正的渐变开始之前插入1像素的白色作为背景色,然后再开始从黑色向白色进行24像素

的渐变,实现我们 的需求。

对于Gecko内核则简单了许多,最初起始色为白色,1像素的位置开始为黑色,25像素的位置设置为白色作为终点。

最后我们将所有的“#000000”修改为设计需求中的“#EEEEEE”,得到如下样式:

另外还有两件事需要做。首先呢,当输入框处于悬停或聚焦状态时,周围的阴影稍稍变暗:

[css]
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
[/css]

最后将“Send”按钮搞成圆角:

[css]
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
[/css]

终于搞定,最终效果如下(ChromeFirefoxSafari):


对于不支持或不能完美支持CSS3的浏览器,比如IE等,可以使用传统的背景图片方式或者JS来实现渐变背景,不在本文讨论范围咯。

(责任编辑:eric)
织梦二维码生成器
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容