天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>使用纯 CSS 设计3D按钮

使用纯 CSS 设计3D按钮

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

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

创建斜面边缘效果

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

Click here to find out more!

所以,创建三维效果的秘密是使用 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>
作者:龙犊整理责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级