《CSS滑动门技术应用.docx》由会员分享,可在线阅读,更多相关《CSS滑动门技术应用.docx(15页珍藏版)》请在三一文库上搜索。
1、在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性, 并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据CSS2.0当前的规定,每一个背景图像都需要各自的 HTML元素。在 许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供 我们使用。标签导航栏就是其中的一个例子。过去,我们频繁的使用这些标签, 并已成为了一种非常流行的站点导航方式。现今,在 CSS已被广泛 支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标 签导航栏来。你也许知道CSS可以用来 驯服”无序的列表,或许你还 曾经看到过这种样式的标签列表:如果我们想用和以上类似的标记, 将导航标签变成这种样式
2、,该怎么 办呢?经过简单的设计,我们是可以做到的。创新于何处?我见过的许多基于CSS的导航标签大都具有一类的特征:矩形的色 块,也许仅仅是一个轮廓,对于当前选中的标签则没有边框,标签在 鼠标指针游至其上时改变颜色。这难道就是 CSS所能给我们的全部 吗? 一连串的小盒子和单调的色彩吗 ?在CSS被广泛采用之前,我们已经看到许多标签导航设计中的创新 之处。独创的外形,熟练的色彩混合,以及对真实世界中许多物理接 口的模仿。但是这些设计往往过分依赖于经过复杂制作、 带有文本的 图像,或被包装成若干嵌套的表格。修改文本或改变标签的顺序则需 要一个复杂的过程。文本的伸缩更是不可能的,或给页面的布局极大
3、的影响。纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快 的载入速度。同样,我们甚至可以为每一个图像加上 alt属性,对于 弱视者,纯文本更可以自由的改变大小。不足为奇的是,基于纯文本 的导航栏,并加以CSS样式,又重新回到 Web设计中来。但是,大 多数基于CSS的导航栏设计,至今为止仍然是毫无意义的。一种最 近被采用的技术(例如CSS)可以让我们做的更好,同样不失先前提 到的那些表格和图片标签的效果。滑动门技术美观的工艺,真正灵活的接口组件,并根据文本自适应大小,我们可 用两个独立的背景图像来创造它。一个在左边,一个在右边。把这两 幅图像想象成两扇可滑动的门,它们滑到一起并交迭,
4、占据一个较窄 的空间;或者相互滑开,占据一个较宽的空间,就像下图所显示的那 样:在这个模型中,一个图像掩盖住另一个图片的一部分。假设我们放置一些独特的内容在每个图像的周围, 例如标签的圆角,我们并不希望 上面一副图像完全的遮蔽住下面一副。 为了防止这种情况的发生,我 们可以将上面一副图像(此例中的左边那幅)控制的尽可能的窄。但 仍然要保证一定的宽度来显现标签一侧的独特性。如果外部是圆角, 我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。如果目标在大小上增长,并超过了以上所显示的宽度,归咎于文本大 小及字体的改变,图像会被拉开,产生不美观的间隙。我们需要判断 的是,预测这种可扩展的量将有
5、多大。如果在浏览器中改变字体的大 小,目标又会如果增长呢?实际来说,我们至少应该估算到字体大小 增长至300%的情况。背景图像也得适应这种增长。对于以上的例子, 我们将下面(即右边)的图像设为400*150 像素,上面的设为9*150 像素。在头脑中,始终要有这样的认识:背景图像只是显示一个可供内容填 充的有效空间(即内容区域和 padding ,称为doorway )。这两幅 图像始终和各自外部的边角相锚定。背景图像的可见部分和在一起即 形成了一个具有这种标签形状的空间(doorway ):如果标签被撑大,图像即滑开,doorway变宽,图像的也将被显露 的更多:此例中,我在photosho
6、p中制作两个平滑,细的3D标签图像,如 文章开头所显示的那样。对于其一,内部明亮,边框暗淡些,用来表 现当前选中的标签。将这种技巧模型应用于左右两幅图像中, 我们需 要扩大标签图像覆盖的区域,将它裁剪成两部分:同样的方式将应用到被称为 当前”的标签中。一旦我们完成了这四幅 图像(1, 2, 3, 4),我们就可以开始用标记和 CSS来制作我们的标 签了。标签的创造当你在研究用CSS来创造水平列表时,会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋,但都需要CSS来解决布局所带来的混乱。一种方法使用inline box ,另一种则用floats 。方法一,可能是比较普遍的一种,是将列
7、表项都 inline显示。inline 方法的魅力在于它的简易性。但是,对于我们即将谈到的滑动门技术 来说,inline方法在特定的浏览器上存在一些解释上问题。方法二, 是我们将要关注的,即用floats将列表项安排在同一行里。令人沮丧的是,floats表面上矛盾的行为正巧回避了自然的逻辑。 尽管如此,对于解决多重浮动元素的基本认识,以及可靠浮动的意义,仍是值得讨论的。我们将用另一种浮动元素来解决浮动元素的排列问题。这样,父类元 素将子类元素完全包括起来。于是,我们就可以为标签加上背景色彩 和背景图像。非常重要的一点必须记住,紧跟在标签后的文本元素用 CSS中的clear功能来清除浮动对象。这
8、样避免了浮动标签影响页面 上其它元素的位置。我们从以下的标记开始:HomeNewsProductsAboutContact现实中,#headerdiv 可能同样包含logo和搜索框。对于我们的例 子,我们要缩短每一个锚链中超链接的值。显然,这些值应该正确的 包含文件或者目录的位置。我们从定位#header容器开始设计列表。这样确保了这个容器确确 实实的充当了容器的作用,以包容它内部浮动的列表项。既然元素是 浮动的,我们同样需要声明它的宽度为100%。加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。同样,设定默认的文本属性,确保样式的统一:#headerfloat:left;widt
9、h:100%;background:yellow;font-size:93%;line-height:normal;)现在,我们同样需要为无序列表设定默认的margin/padding 值为0,并去掉列表项前面的标记。每个列表项左浮动:#header ul margin:0;padding:0;list-style:none;)#header li float:left;margin:0;padding:0;)设定锚链强制作为块对象呈递,我们便可无忧的控制所有的样式:#header a display:block;)下一步,我们将右侧的背景图像加入到列表项中去(改变如粗体所示):#header
10、 li float:left;background:url(norm_right.gif)no-repeat right top;margin:0;padding:0;)在加入左侧图像之前,我们可以在效果1种看看目前为止的效果。(在效果中,忽略body中的规则。仅设定基本margin,padding,colors,text的属性。)现在我们可以将左侧图像放置在锚链的左边(容器内的元素)。我们同时加入padding ,扩大标签并将文本从标签的边缘推开:#header a display:block;background:url(norm_left.gif)no-repeat left top;p
11、adding:5px 15px; )这样我们就得到了效果2。注意我们的标签是如何成型的。在这里, IE5/Mac的用户会立刻惊奇道,天啊,我的标签垂直堆在一起并且延伸至整个屏幕! 坏要着急,我们马上帮你解决。眼下,尽量按照 下面去做,或者方便的话,临时改换其他的浏览器,并且 IE5/Mac 版本的问题会马上得到解决。 现在,一般标签的背景图像已经完成了,我们要为当前标签更换图像。我们通过对目标列表项加入id=current和锚链来实现。既然 不需要改变背景的其他外观,图像除外,我们就使用 background-image 的特性:#header #current background-imag
12、e:url(norm_right_on.gif);)#header #current a background-image:url(norm_left_on.gif);)我们要在标签下添加一条边框。但是,将边框属性应用于父类的 #header容器上,将不能解决 当前标签无需边框的问题。于是我们 制作新的带有边框的图像以代替它。同样,我们可以为它加入渐变效果:我们将图像放置到#header容器的背景中去(代替原有的黄色背景), 将背景图像移至到最下方,并为图像上方留出的空白添加相应的背景 颜色。同时,去掉由body继承下来的padding ,为ul的上、左、 右边加进10像素的padding :
13、#headerfloat:left;width:100%;background:#DAE0D2 url(bg.gif)repeat-x bottom;font-size:93%;line-height:normal;)#header ul margin:0;list-style:none;)我们必须让当前”标签覆盖边框,如下面提示的那样。你也许会认为 我们将要把底部边框加入到与其颜色相对应的、#header背景图像中去,然后将 当前标签的底部边框颜色改为白色。但是,对于挑剔 的观察者,还是会发现一些细小的差别。于是,我们改变锚链的 padding ,为当前”标签创造出直角来,如下面放大的例子:
14、我们通过减少1像素普通锚链的底部padding值(5px-1px=4px ) 来实现,然后为 当前锚链补上减去的padding。#header a display:block;background:url(norm_left.gif)no-repeat left top;padding:5px 15px 4px;)#header #current a background-image:url(norm_left_on.gif);padding-bottom:5px;经过改变,底部边框将在普通标签中出现,而在 当前标签中则隐藏 了起来。于是,我们得到了 效果3。收尾工作敏锐的观察者也许会在上一例
15、注意到白色的标签角落。这些不透明的角用来防止下面的图像透过上面的一副。理论上,我们可以尝试使用部分背景图像来适应标签的背景。但是我们的标签会在高度上增长, 尝试通过移动背景颜色,背景图像就会相对变矮。代替的办法是,改 变图像,将标签的角落设为透明。如果弧线是反锯齿的,我们在其边 缘使用较平均的背景色彩。现在,角落已经变成透明色,左边的图像将透过右边图像的角落。为 了补偿,我们为表单项加入和左边图像宽度相吻合的padding(9px )。既然已经为表单项加入了 padding ,我们还需去掉同样的 宽度以达到文本的居中(15px-9px=6px ):#header li float:left;b
16、ackground:url(right.gif)no-repeat right top;margin:0;padding:0 0 0 9px;#header a display:block;background:url(left.gif)no-repeat left top;padding:5px 15px 4px 6px;)仍未结束,因为加入了 9个像素的padding使左边图像与标签的左边之间产生了一段空白。现在,左侧与右侧,可见“doorway”的边缘接在一起,我们再不需要将左边图像保持在上方。于是,交换两幅背景图像的顺序,相反过来。同样交换 当前标签中使用的两幅图像:#header l
17、i float:left;background:url( left.gif )no-repeat left top;margin:0;padding:0 0 0 9px;)#header a, #header strong, #header span display:block;background:url( right.gif )no-repeat right top;padding:5px 15px 4px 6px;)#header #current background-image:url( left_on.gif );)#header #current a background-ima
18、ge:url( right_on.gif );padding-bottom:5px;)完成这些后,我们到达了效果4。要注意的是,透明的角落在标签的 左侧产生了一段不能点击的无效区域。这个区域在文本以外,但仍然 是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域,那么我们必须使用在标签后面使 用颜色,然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。 对于剩下的问题,我们将一次性完成全部的修改:加重标签文本,将普通标签中的文本改为棕色, 当前标签文本改为深灰色,去掉链接 的下划线,最后将悬停文本色彩改为同样的深灰色。 经过一系列的改 变,
19、我们将看到目前为止的 效果5。一致性的解决在效果2之后,我们公认的一个问题就是在IE5/Mac浏览方式下, 每个标签延伸并占据了整个浏览器的宽度, 以致标签垂直的堆在了一 起。这不是我们所希望的。在大多数的浏览器中,浮动一个元素会有收缩,收缩最小至它所包含 内容的大小。如果一个浮动元素包含一幅图像或其本身即图像,便会收缩至图像的宽度。如果仅仅包含文本,那么将会收缩至最长的,不 可被顶开的那文本的宽度。一个问题出现在IE5/Mac中的图片中,当一个auto-width 的块对 象元素被插入到一个浮动的元素中时。其他的浏览器仍旧将浮动缩小 至最小,而无视容器内的块对象元素。但IE5/Mac并不按照
20、这种情况,相反它将浮动和块对象元素扩展至尽可能的宽度。为解决这个问题,我们将锚链同时浮动起来,但仅仅对于IE5/Mac ,以免放弃其他 的浏览器。首先,我们为锚链设定浮动规则。然后,我们使用 反斜杠 注释法来隐藏这种规则,让它仅仅对IE5/Mac生效,而无视其他的 浏览器:#header a float:left;display:block;background:url(right.gif)no-repeat right top;padding:5px 15px 4px 6px;text-decoration:none;font-weight:bold;color:#765;)/* Comme
21、nted Backslash Hackhides rule from IE5-Mac */#header a float:none;/* End IE5-Mac hack */现在IE5/Mac浏览器将按我们所期望的那样来显示标签, 看效果6。 对于非IE5/Mac的浏览器什么都不需要改变。注意到IE5.0/Mac的 一系列解释上的bug在IE5.1中解决。因此,滑动门技术在 5.0版 本中所遭遇的问题超出了 hack的限度。既然升级到IE5.1/Mac已不 成难题,OS 9 Macs/IE5.0 的占有率应逐渐缩减至很低。举一反三我们刚刚演练了滑动门技术,用纯文本和无序列表来创造导航标签,
22、加以少量的样式。它的装载速度快,具有可维持性,并且文本的大小 可以在不破坏外观的情况下进行较大的伸缩。不必我们再重申在创造复杂样式的导航栏中,滑动门技术所表现出来的弹性了。只有想不到,没有做不到。最终效果向我们展示了一例,但我们设计 不可能因此而被限定死。在某些场合,标签不一定是对称的。我很快就制作了这种标签的 第二 个版本,也有阴影3D的样式,有角的边缘,和具有特色的左边部分。 依据第二个版本,我们甚至可以交换左右两幅图像的位置。 以这种细 致的布局和灵巧的图像控制,我们可以去掉按钮的下边框以便标签图 像更好的去适应背景,如第三个版本所显示的那样。如果你的浏览器 支持多个样式表的切换,你甚至可以靠它在多个版本的导航栏之间 自 由切换。仍有许多我们没有提到的其他的效果。 快速的提一下,我改变鼠标悬 停的文本色彩,但是真个图像可以替换掉以创造出更有趣的变换效 果。即使标记中两个嵌套的 HTML元素,也可以用CSS来达到一些 我们还未想到的效果。我们在此例中创造的仅仅是水平的标签栏, 但 滑动门亦可应用于许多其他的情形。