分享
 
 
 

使用纯 CSS 设计3D按钮

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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="link1.html">Button 1</a></li>

<li><a href="link2.html">Button 2</a></li>

<li><a href="link3.html">Button 3</a></li>

</ul>

</div>

</body>

CSS 样式使这种方法与设计普通的平面按钮的样式非常相似。唯一多出来的地方是这里将 border-style: outset和 border-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 则以固定的颜色呈现每个边界,这样就产生一个比较有突边的,不怎么圆滑的外观效果。

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

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

在前面的文章中我已经讲到过创建 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 则以固定的颜色呈现每个边界,这样就产生一个比较有突边的,不怎么圆滑的外观效果。

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有