使用CSS3和RGBa创建超酷的按钮
作者:神采飞扬 来源:前端观察 发布时间:2009-06-02 12:41:00
呃,看到这个标题,我们可以首先将IE系浏览器无视了。
我承认,我是有极简主义倾向的,我希望能够使用最少的代码和图片做更多的事情。
虽然CSS3仅仅增加了少数新特性,但是这些属性却可以做很多有用的事情,可以大大的简化我们的工作。我们今天做的这些按钮,就是充分利用CSS3的圆角、盒子阴影和文字阴影效果,同时使用RGBa色彩。
让我们先来看一下demo吧:
我们可以通过四步来做出这些漂亮的按钮:
1.按钮的基本设置
我们需要先设置一下按钮的基本样式,这里我们使用a标签,当然也可以使用input、button标签等,这里使用a标签是因为这三个标签中只有a标签支持:hover伪类。
.btn {
display: inline-block;/*thanks to ytzong*/
/*display:block;
float:left;
margin:5px; */
padding: 4px 10px;
font:bold 13px/180% Tahoma, sans-serif;
color: #fff;
text-decoration: none;
overflow:hidden;
}
此处多谢ytzong童鞋的建议,我们改为采用display:inline-block,这样可以省去float和margin两行代码。——神飞@05.31.2009
2.半透明的png渐变图片
这是我们这里唯一用到的一个图片,这个透明的png图片用来实现颜色的渐变。这个图片我们可以称之为单色透明度渐变。在CSS中,使用背景演示+这样的png图片就可以实现不同的色彩渐变效果。当然,这个不是CSS3的特性,除了IE6以下版本的浏览器,所有的浏览器都可以实现这样的效果。你可以点击这里查看该png文件。
.btn {
...
background: #222 url(sprites.png) repeat-x;
/**background**/
}
3.圆角
圆角(border-radius)是目前浏览器支持最好的CSS3特性之一,除了IE系浏览器,各个A级浏览器都支持,尽管大都是通过私有属性来实现的,至少,这是可用的。
.btn {
...
background: #222 url(sprites.png) repeat-x;
/**background**/
}
4.阴影和RGBa
box-shadow和text-shadow是CSS3新增的两个重要的属性,它们可以很方便的实现块级元素阴影和文字的阴影。但是,如果如果阴影的颜色使用半透明效果,岂不是更好?这样元素可以更好的和背景融合到一起。值得注意的是,FF只有等到3.5版本才支持text-shadow属性(目前Firefox3.5beta4版本已经支持)。
.btn {
...
background: #222 url(sprites.png) repeat-x;
/**背景图片**/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/**圆角**/
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
/**按钮阴影**/
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
/**文字阴影**/
}
好了,到现在,我们的按钮已经完全做好了。它已经实现我们的目标了。
这个按钮,是黑色的,那么其它颜色的按钮实现起来也就比较容易了:
...
.green.btn, .green.btn:visited {background-color: #91bd09;}
.green:hover {background-color: #749a02;}
.blue, .blue:visited {background-color: #2daebf;}
.blue:hover {background-color: #007d9a;}
.red, .red:visited {background-color: #e33100;}
.red:hover {background-color: #872300;}
...
请注意,这些样式一定要放在.btn的后面。这样这些绿色、蓝色、红色等颜色的按钮的背景色才能重写.btn的背景色。然后再使用<a class=”btn green”…就可以了。
最后,让我们来可怜一下IE浏览器吧,这些按钮在IE7和IE8浏览器中会显示直角、有渐变色、无阴影、无透明色,但是在IE6中,它将显示浅蓝色的背景,这是因为IE6不支持png透明所致,如果你想让它在IE6中能够像个按钮,就用那些js后IE的滤镜来处理吧。
猜你喜欢
- 以前大家谈了很多有关打开数据库连接安全的问题,现在我再提出一种思路:使用activex dll来保护你的代码。(既可以不用为使用共享的加密软
- asp代理采集代码如下:<%Function ProxyPage(url) Set Retrieval&
- 概述:本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从
- 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接。下面简单
- 方法一【推荐】、用js插入flash,可防止虚线框激活建立一个ShowFlash.js文件,拷贝以下代码:function sho
- 为什么要用flash呢?动画流畅,视觉效果好缓存能力强那使用flash有什么问题呢?需要Flash播放器在M$的补丁打遍天下之前IE有那神奇
- 非常好的一篇技术文档,翻译自Louis Lazaris 2009年9月15日发表的《The Z-Index CSS Property: A
- Insert 和 Update假设现在你要把下面的数据插入到数据库中.ID = 3TheDate=mktime(0,0,0,8,31,200
- 先来看看什么是书签查找: 当优化器所选择的非聚簇索引只包含查询请求的一部分字段时,就需要一个查找(lookup)来检索其他字段来满足请求。对
- strIn 为 输入的Email地址字符串变量 返回为true或falsereturn Regex.IsMatch(strIn, @&quo
- 如果你细心跟踪一下SQL Server数据库服务器的登录过程,你会发现口令计算其实是非常脆弱的,SQL Server数据库的口令脆弱体现两方
- 许多人利用Session变量来开发ASP(Active Server Pages)。这些变量与任何编程语言中通用的变量非常相似,并且具有和通
- 我们大致会在下列几种情况下用到: 一、文件操作(FileSystemObject)<%@ IMPORT
- asp之家注:如果你学习过asp,并且在网络公司上过班,一定会接触到网购系统,网购系统可以说是一个典型的程序类型,而其中最重要,也是最关键的
- 如何远程注册DLL?试试下面的代码:<% Response.Buffer = True %&g
- Oracle中有多种方法可以向数据库或服务器文件系统上载文件,这里主要介绍如下三种:Oracle HTTP Server(OHS)的mod_
- Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....相信看完
- //********************************************************************
- 八卦为先八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:你知道世界上第一份reset.css在哪么?* { m
- 可试试下面这个方法,但要保证在FORM中使用的Input Name都和数据库中使用的是一样的:upfiles.asp<% &