来谈谈：利用纯 CSS 计划3D按钮

只看该作者 · 发表于 2015-1-16 00:22:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

更好的控制页面布局。不用多说。
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>
<divid="buttonA">
<ul>
<li><ahref="link1.html">Button1</a></li>
<li><ahref="link2.html">Button2</a></li>
<li><ahref="link3.html">Button3</a></li>
</ul>
</div>
</body>123下一页

在后面的文章中我已讲到过创立CSS按钮的办法，以是我将只挑要点部分化释。
div#buttonAul划定规矩设置惯例文本的尺寸和间距，div#buttonAli划定规矩往除列表项的默许项目标记（list-style-type:none）并设置按钮框的尺寸。div#buttonAlia划定规矩使全部按钮可点击（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界限的体例有很年夜的分歧。InternetExplorer创立加倍精密的效果，在每一个界限的内边沿有一个加亮区，在外边沿有一个暗影区。而另外一方面，Netscape则以流动的色彩出现每一个界限，如许就发生一个对照有突边的，不怎样油滑的表面效果。
利用inset/outset界限款式是摹拟3D效果的一种复杂快速的办法。但是，这不是独一的办法。假如你不喜好尺度的效果，大概你为扫瞄器在体现体例上的不同而困扰，那末你能够本人把持界限的色彩来发生你想要的效果。
除利用能border-style的inset/outset属性和让扫瞄器处置每一个界限的实践色彩以外，你还可使用本人的款式划定规矩为每一个界限独自设置色彩。上一页123下一页

FigureBshowstheresultsofusingastylesheetthatspecifiesthecolorsofeachbuttonsideindividually.ThemarkupisthesameasinFigureA.HerestheCSScode:
图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#buttonAlia{
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形态时发生被按下的效果。把持这些细节的长处是你能够设置自力的正面和顶部加亮区的色彩，并且最初的了局在一切扫瞄器体现加倍分歧。

上一页123</p>
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

只看该作者 · 发表于 2015-1-18 06:29:31

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-1-25 22:37:16

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-4 13:01:15

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-2-9 22:48:32

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-2-28 03:39:51

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-9 20:31:48

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-17 01:10:24

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-23 15:53:09

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：利用纯 CSS 计划3D按钮

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子