使用纯 CSS 设计 3D 按钮 - CSS - 网页制作 - 站长资讯 - 一摘网站分类目录-免费收录各类优秀网站的中文网站目录
当前位置:一摘网站分类目录 > 首页 > 资讯首页 > 网页制作 > CSS > 使用纯 CSS 设计 3D 按钮

使用纯 CSS 设计 3D 按钮

发表时间:2011-07-05内容来源:中国目录网整理  [我要投稿]  [免费提交网站]  转发微博:

  CSS 按钮的效率远比基本图像的按钮的效率高得多,因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且,你不需要任何 JavaScript 来交换图像以实现翻卷效果,因为 CSS 伪类(pseudoclass)能够让你为链接的每个状态(链接<link>、已访问<visited>、悬停<hover>、激活<active>)建立独立的样式。

纯 CSS 按钮唯一的问题是它们看上去相当单调,只有固定的颜色背景和一个简单的边界。一个解决方法是使用混合技术向 CSS 样式的文本按钮加入一个背景图像,从而使其具有3D效果。然而,读者的电子邮件提示我寻找一种使用纯 CSS 创建3D按钮效果的方法——不需要图像。我发现通过控制 CSS 按钮边界的样式有两个方法可以创建斜面边缘的外观效果。

创建斜面边缘效果

要使一个按钮具有3D斜面边缘效果,需要模拟一个光源,以在一个凸起按钮的边缘创建加亮区和阴影区。如果光源在上面稍微偏向按钮的左边,那么按钮的顶部和左侧就会比按钮表面更亮,而底部和右侧就会比按钮表面更暗。

所以,创建三维效果的秘密是使用 CSS 边界模拟按钮的侧面,并为每个边界的使用稍微不同的颜色,具体的颜色方案要根据它所表示的是光亮的一侧还是阴暗的一侧而定。为了看上去更加真实,边界应该具有斜接角,CSS 边界能够很好地满足这一需要。

方法1:使用inset/outset(嵌入线/浮出线)边界

有一个 CSS 边界属性能够自动产生合理的斜面边缘模拟效果。你只须为按钮样式的 border-style 属性指定为 inset 或者 outset即可。浏览器会以稍微不同的背景色阴影来处理元素边界的表现细节,从而得到期望的效果。outset属性模拟凸起按钮的阴影边缘,inset 属性通过反转阴影来模拟按钮被按下的情景。

图 A 展示了实际的 inset/outset 边界效果。这个例子是由一些非常简单的代码产生的。XHTML 非常简单,只包含一些按钮标签(label)和链接。

<body>
<div id="buttonA">
    <ul>
        <li><a href=http://www.chinahtml.com/0709/"link1.html">Button 1</a></li>
        <li><a href=http://www.chinahtml.com/0709/"link2.html">Button 2</a></li>
        <li><a href=http://www.chinahtml.com/0709/"link3.html">Button 3</a></li>
    </ul>
</div>
</body>

CSS 样式使这种方法与设计普通的平面按钮的样式非常相似。唯一多出来的地方是这里将 border-style: outsetborder-style: inset规则同 border-width设置组合使用,后者将边界宽度设置的足够大以使其可见。

body {
    margin: 0px;
    padding: 0px;
}
div#buttonA {
    margin-left: 50px;
}
div#buttonAul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 30px;
}
div#buttonAli {
    list-style-type: none;
    height: 30px;
    width: 125px;
    margin: 20px;
    text-align:center;
}
div#buttonAli a {
    height: 100%;
    width: 100%;
    display: block;
    text-decoration: none;
    border-width: 6px;
}
div#buttonAlia:link {
    color: #000000;
    font-weight: bold;
    background-color: #CCCCCC;
    border-style: outset;
}
div#buttonAlia:visited {
    color: #000000;
    font-weight: normal;
    background-color: #CCCCCC;
    border-style: outset;
}
div#buttonAlia:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #999999;
    border-style: outset;
}
div#buttonAlia:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #666666;
    border-style: inset;
}

在前面的文章中我已经讲到过创建 CSS 按钮的方法,所以我将只挑要点部分解释。

div#buttonAul规则设置常规文本的尺寸和间距,div#buttonAli规则去除列表项的默认项目符号(list-style-type: none)并设置按钮框的尺寸。div#buttonAli a规则使整个按钮可点击(height: 100%; width: 100%; display: block;),它还是设置边界宽度的一个很方便的地方。

样式的其余部分控制不同按钮状态的外观变化。所有伪类(:link、:visited、:hover、:active)都有一个 color、font-weight、background-color 和 border-style 规则。除div#buttonAlia:active规则之外,所有样式都使用 border-style: outset规则,div#buttonAlia:active使用 border-style:inset规则。这样就使按钮状态有一个凸起的外观——当然要将按钮被点击时的情况除外,在按钮被点击时它呈现被按下的状态。

不同的浏览器呈现 inset 和 outset 边界的方式有很大的不同。Internet Explorer 创建更加精细的效果,在每个边界的内边缘有一个加亮区,在外边缘有一个阴影区。而另一方面,Netscape 则以固定的颜色呈现每个边界,这样就产生一个比较有突边的,不怎么圆滑的外观效果。

方法2:控制单个侧面

使用 inset/outset 边界样式是模拟3D效果的一种简单快捷的方法。然而,这不是唯一的方法。如果你不喜欢标准的效果,或者你为浏览器在表现方式上的差别而困扰,那么你可以自己控制边界的颜色来产生你想要的效果。

除了使用能border-style 的 inset/outset 属性以及让浏览器处理每个边界的实际颜色之外,你还可以使用自己的样式规则为每个边界单独设置颜色。

图 B展示了使用这种方法得出的3D按钮效果,这里样式表单独指定每个按钮侧面的颜色。图 B 所用标记与图 A 中的一样,下面是 CSS 代码:

body {
    margin: 0px;
    padding: 0px;
}
div#buttonA {
    margin-left: 50px;
}
div#buttonAul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 30px;
}
div#buttonAli {
    list-style-type: none;
    height: 30px;
    width: 125px;
    margin: 10px;
    text-align:center;
}
div#buttonAli a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:link {
    color: #000000;
    font-weight: bold;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:visited {
    color: #000000;
    font-weight: normal;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #777777;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #666666;
    border-style: solid;
    border-top-color: #333333;
    border-left-color: #555555;
    border-right-color: #BBBBBB;
    border-bottom-color: #DDDDDD;
}

尽管这块代码明显要比前一个例子中的 CSS 代码要长,但并不是两者间的主要区别。它们的主要区别在于这里使用了一个 border-style: solid规则替换了原来的 border-style: outset (或 border-style: inset) 规则,后接几个规则单独设置每个边界的颜色(border-top-color: #DDDDDD等)。

使用这一方法,你可以完全控制按钮侧面的颜色。也就是说完全由你决定选择合适的颜色来获得你所要的效果——而且,你还要记住交换颜色以使按钮在处于 :active 状态时产生被按下的效果。控制这些细节的优点是你可以设置独立的侧面和顶部加亮区的颜色,而且最后的结果在所有浏览器表现更加一致。

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
112
最新推荐                    我也要出现在这里 | 更多
快速链接
最新快速审核
动态图片基地每日最搞笑的gif动态图片大全与您共分享,网罗当下最热门的微信图片表
www.asqql.com
中国数字期刊网(www.shiziqikan.com)是提供论文发表、期刊合作、
www.shuziqikan.com
71读小说网是广大书友最值得收藏的网络小说阅读网,网站收录了当前最火最热的网络小
www.71du.com
大香蕉网是专业发放淘宝优惠券天猫超市优惠券的优惠券网站,每天数万种淘宝内部优惠券
www.daxiangjiao1234.com
读客吧汇聚经典原创小说,致力于打造最好最完善的免费网络小说阅读网,网站收录了当前
www.dukeba.com
ADS 广告位招租
一摘开放式网站目录
在线投稿提交网站关于我们帮助中心 广告赞助免责声明 隐私保护最新推荐友情连接意见反馈
Copyright © 2006-2011 一摘网络 版权所有  1zhai.com  All Rights Reserved
在线投稿,网站免费登录,新收录网站首页显示,所有排名全自动实时刷更新,网站推广的最佳选择就在一摘开放式网站目录
Powered by 一摘网络(1zhai.com)    快速审核|投放广告,请点击给我信息快速审核|投放广告
页面执行时间: 131.5 毫秒