搜索
首页web前端css教程CSS中的滑动门技术_CSS/HTML

ISSN: 1534-0295. 20 October 2003 – Issue No. 160

原文作者:Douglas Bowman
原文出自:A List Apart
中文翻译:54player.com nobita
版权说明:本文中文翻译版权归译者54player.com nobita所有。需要转载发表的,请先与作者联系

在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素。在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用。

标签导航栏就是其中的一个例子。过去,我们频繁的使用这些标签,并已成为了一种非常流行的站点导航方式。现今,在CSS已被广泛支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标签导航栏来。你也许知道CSS可以用来“驯服”无序的列表,或许你还曾经看到过这种样式的标签列表:

[一般的基于CSS的标签,采用单色及直角]

如果我们想用和以上类似的标记,将导航标签变成这种样式,该怎么办呢?

[加入一定样式的标签,具有圆角和3D及阴影效果]

经过简单的设计,我们是可以做到的。

创新于何处?

我见过的许多基于CSS的导航标签大都具有一类的特征:矩形的色块,也许仅仅是一个轮廓,对于当前选中的标签则没有边框,标签在鼠标指针游至其上时改变颜色。这难道就是CSS所能给我们的全部吗?一连串的小盒子和单调的色彩吗?

在CSS被广泛采用之前,我们已经看到许多标签导航设计中的创新之处。独创的外形,熟练的色彩混合,以及对真实世界中许多物理接口的模仿。但是这些设计往往过分依赖于经过复杂制作、带有文本的图像,或被包装成若干嵌套的表格。修改文本或改变标签的顺序则需要一个复杂的过程。文本的伸缩更是不可能的,或给页面的布局极大的影响。

纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度。同样,我们甚至可以为每一个图像加上alt属性,对于弱视者,纯文本更可以自由的改变大小。不足为奇的是,基于纯文本的导航栏,并加以CSS样式,又重新回到Web设计中来。但是,大多数基于CSS的导航栏设计,至今为止仍然是毫无意义的。一种最近被采用的技术(例如CSS)可以让我们做的更好,同样不失先前提到的那些表格和图片标签的效果。

滑动门技术

美观的工艺,真正灵活的接口组件,并根据文本自适应大小,我们可用两个独立的背景图像来创造它。一个在左边,一个在右边。把这两幅图像想象成两扇可滑动的门,它们滑到一起并交迭,占据一个较窄的空间;或者相互滑开,占据一个较宽的空间,就像下图所显示的那样:

[图中有两扇门。第一幅中两扇门叠在一起的部分较多, 第二幅则较少。]

在这个模型中,一个图像掩盖住另一个图片的一部分。假设我们放置一些独特的内容在每个图像的周围,例如标签的圆角,我们并不希望上面一副图像完全的遮蔽住下面一副。为了防止这种情况的发生,我们可以将上面一副图像(此例中的左边那幅)控制的尽可能的窄。但仍然要保证一定的宽度来显现标签一侧的独特性。如果外部是圆角,我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。

[图像显示了左边一个独立较窄的带有圆角的图像,右边的图像则于其类似,只是圆角的位置不同。]

如果目标在大小上增长,并超过了以上所显示的宽度,归咎于文本大小及字体的改变,图像会被拉开,产生不美观的间隙。我们需要判断的是,预测这种可扩展的量将有多大。如果在浏览器中改变字体的大小,目标又会如果增长呢?实际来说,我们至少应该估算到字体大小增长至300%的情况。背景图像也得适应这种增长。对于以上的例子,我们将下面(即右边)的图像设为400*150像素,上面的设为9*150像素。

在头脑中,始终要有这样的认识:背景图像只是显示一个可供内容填充的有效空间(即内容区域和padding,称为doorway)。这两幅图像始终和各自外部的边角相锚定。背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间(doorway):

[图像显示了两幅图像底部的额外高度。右边图像的左侧同样具有额外的宽度。可见的部分是标签成型。]

如果标签被撑大,图像即滑开,doorway变宽,图像的也将被显露的更多:

[图像显示出两幅图像被拉开,形成更宽标签的情况,在高度上则是使用额外的那部分高度。]

此例中,我在photoshop中制作两个平滑,细的3D标签图像,如文章开头所显示的那样。对于其一,内部明亮,边框暗淡些,用来表现当前选中的标签。将这种技巧模型应用于左右两幅图像中,我们需要扩大标签图像覆盖的区域,将它裁剪成两部分:

[左侧和右侧的图像]

同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像(1, 2, 3, 4),我们就可以开始用标记和CSS来制作我们的标签了。

标签的创造

当你在研究用CSS来创造水平列表时,会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋,但都需要CSS来解决布局所带来的混乱。一种方法使用inline box,另一种则用floats。

方法一,可能是比较普遍的一种,是将列表项都inline显示。inline方法的魅力在于它的简易性。但是,对于我们即将谈到的滑动门技术来说,inline方法在特定的浏览器上存在一些解释上问题。方法二,是我们将要关注的,即用floats将列表项安排在同一行里。令人沮丧的是,floats表面上矛盾的行为正巧回避了自然的逻辑。尽管如此,对于解决多重浮动元素的基本认识,以及可靠浮动的意义,仍是值得讨论的。

我们将用另一种浮动元素来解决浮动元素的排列问题。这样,父类元素将子类元素完全包括起来。于是,我们就可以为标签加上背景色彩和背景图像。非常重要的一点必须记住,紧跟在标签后的文本元素用CSS中的clear功能来清除浮动对象。这样避免了浮动标签影响页面上其它元素的位置。

我们从以下的标记开始:

<div id="header">
  <ul>
   <li><a href="#">Home</a></li>
   <li id="current"><a href="#">News</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
</div>

现实中,#header div可能同样包含logo和搜索框。对于我们的例子,我们要缩短每一个锚链中超链接的值。显然,这些值应该正确的包含文件或者目录的位置。

我们从定位#header容器开始设计列表。这样确保了这个容器确确实实的充当了容器的作用,以包容它内部浮动的列表项。既然元素是浮动的,我们同样需要声明它的宽度为100%。加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。同样,设定默认的文本属性,确保样式的统一:

#header {
  float:left;
  width: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 li {
  float:left;
  <strong>background:url("norm_right.gif")
   no-repeat right top;</strong>
  margin:0;
  padding:0;
  }

在加入左侧图像之前,我们可以在效果1种看看目前为止的效果。(在效果中,忽略body中的规则。仅设定基本margin,padding,colors,text的属性。)

---

现在我们可以将左侧图像放置在锚链的左边(容器内的元素)。我们同时加入padding,扩大标签并将文本从标签的边缘推开:

#header a {
  display:block;
  <strong>background:url("norm_left.gif")
   no-repeat left top;
  padding:5px 15px;</strong>
  }

这样我们就得到了效果2。注意我们的标签是如何成型的。在这里,IE5/Mac的用户会立刻惊奇道,“天啊,我的标签垂直堆在一起并且延伸至整个屏幕!”不要着急,我们马上帮你解决。眼下,尽量按照下面去做,或者方便的话,临时改换其他的浏览器,并且IE5/Mac版本的问题会马上得到解决。

---

现在,一般标签的背景图像已经完成了,我们要为“当前”标签更换图像。我们通过对目标列表项加入id="current"和锚链来实现。既然不需要改变背景的其他外观,图像除外,我们就使用background-image的特性:

<strong>#header #current {
  background-image:url("norm_right_on.gif");
  }
#header #current a {
  background-image:url("norm_left_on.gif");
  }</strong>

我们要在标签下添加一条边框。但是,将边框属性应用于父类的#header容器上,将不能解决“当前”标签无需边框的问题。于是我们制作新的带有边框的图像以代替它。同样,我们可以为它加入渐变效果:

我们将图像放置到#header容器的背景中去(代替原有的黄色背景),将背景图像移至到最下方,并为图像上方留出的空白添加相应的背景颜色。同时,去掉由body继承下来的padding,为ul的上、左、右边加进10像素的padding:

#header {
  float:left;
  width:100%;
  <strong>background:#DAE0D2 url("bg.gif")
   repeat-x bottom;</strong>
  font-size:93%;
  line-height:normal;
  }
#header ul {
  margin:0;
  <strong>padding:10px 10px 0;</strong>
  list-style:none;
  }

我们必须让“当前”标签覆盖边框,如下面提示的那样。你也许会认为我们将要把底部边框加入到与其颜色相对应的、#header背景图像中去,然后将“当前”标签的底部边框颜色改为白色。但是,对于挑剔的观察者,还是会发现一些细小的差别。于是,我们改变锚链的padding,为“当前”标签创造出直角来,如下面放大的例子:

[将两个标签放大,左边显示的标签角落有1像素的误差,而右边的则是完美的直角。]

我们通过减少1像素普通锚链的底部padding值(5px-1px=4px)来实现,然后为“当前”锚链补上减去的padding。

#header a {
  display:block;
  background:url("norm_left.gif")
   no-repeat left top;
  <strong>padding:5px 15px 4px;</strong>
  }
#header #current a {
  background-image:url("norm_left_on.gif");
  <strong>padding-bottom:5px;</strong>
  }

经过改变,底部边框将在普通标签中出现,而在“当前”标签中则隐藏了起来。于是,我们得到了效果3

收尾工作

敏锐的观察者也许会在上一例注意到白色的标签角落。这些不透明的角用来防止下面的图像透过上面的一副。理论上,我们可以尝试使用部分背景图像来适应标签的背景。但是我们的标签会在高度上增长,尝试通过移动背景颜色,背景图像就会相对变矮。代替的办法是,改变图像,将标签的角落设为透明。如果弧线是反锯齿的,我们在其边缘使用较平均的背景色彩。

现在,角落已经变成透明色,左边的图像将透过右边图像的角落。为了补偿,我们为表单项加入和左边图像宽度相吻合的padding(9px)。既然已经为表单项加入了padding,我们还需去掉同样的宽度以达到文本的居中(15px-9px=6px):

#header li {
  float:left;
  background:url("right.gif")
   no-repeat right top;
  margin:0;
  <strong>padding:0 0 0 9px;</strong>
  }
#header a {
  display:block;
  background:url("left.gif")
   no-repeat left top;
  <strong>padding:5px 15px 4px 6px;</strong>
  }

仍未结束,因为加入了9个像素的padding使左边图像与标签的左边之间产生了一段空白。现在,左侧与右侧,可见“doorway”的边缘接在一起,我们再不需要将左边图像保持在上方。于是,交换两幅背景图像的顺序,相反过来。同样交换“当前”标签中使用的两幅图像:

#header li {
  float:left;
  background:url("<strong>left.gif</strong>")
   no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
#header a, #header strong, #header span {
  display:block;
  background:url("<strong>right.gif</strong>")
   no-repeat right top;
  padding:5px 15px 4px 6px;
  }
#header #current {
  background-image:url("<strong>left_on.gif</strong>");
  }
#header #current a {
  background-image:url("<strong>right_on.gif</strong>");
  padding-bottom:5px;
  }

完成这些后,我们到达了效果4。要注意的是,透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外,但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域,那么我们必须使用在标签后面使用颜色,然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。

---

对于剩下的问题,我们将一次性完成全部的修改:加重标签文本,将普通标签中的文本改为棕色,“当前”标签文本改为深灰色,去掉链接的下划线,最后将悬停文本色彩改为同样的深灰色。经过一系列的改变,我们将看到目前为止的效果5

一致性的解决

在效果2之后,我们公认的一个问题就是在IE5/Mac浏览方式下,每个标签延伸并占据了整个浏览器的宽度,以致标签垂直的堆在了一起。这不是我们所希望的。

在大多数的浏览器中,浮动一个元素会有收缩,收缩最小至它所包含内容的大小。如果一个浮动元素包含一幅图像或其本身即图像,便会收缩至图像的宽度。如果仅仅包含文本,那么将会收缩至最长的,不可被顶开的那文本的宽度。

一个问题出现在IE5/Mac中的图片中,当一个auto-width的块对象元素被插入到一个浮动的元素中时。其他的浏览器仍旧将浮动缩小至最小,而无视容器内的块对象元素。但IE5/Mac并不按照这种情况,相反它将浮动和块对象元素扩展至尽可能的宽度。为解决这个问题,我们将锚链同时浮动起来,但仅仅对于IE5/Mac,以免放弃其他的浏览器。首先,我们为锚链设定浮动规则。然后,我们使用反斜杠注释法来隐藏这种规则,让它仅仅对IE5/Mac生效,而无视其他的浏览器:

#header a {
  <strong>float:left;</strong>
  display:block;
  background:url("right.gif")
   no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }
<strong>/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */</strong>

现在IE5/Mac浏览器将按我们所期望的那样来显示标签,看效果6。对于非IE5/Mac的浏览器什么都不需要改变。注意到IE5.0/Mac的一系列解释上的bug在IE5.1中解决。因此,滑动门技术在5.0版本中所遭遇的问题超出了hack的限度。既然升级到IE5.1/Mac已不成难题,OS 9 Macs/IE5.0的占有率应逐渐缩减至很低。

举一反三

我们刚刚演练了滑动门技术,用纯文本和无序列表来创造导航标签,加以少量的样式。它的装载速度快,具有可维持性,并且文本的大小可以在不破坏外观的情况下进行较大的伸缩。不必我们再重申在创造复杂样式的导航栏中,滑动门技术所表现出来的弹性了。

只有想不到,没有做不到。最终效果向我们展示了一例,但我们设计不可能因此而被限定死。

在某些场合,标签不一定是对称的。我很快就制作了这种标签的第二个版本,也有阴影3D的样式,有角的边缘,和具有特色的左边部分。依据第二个版本,我们甚至可以交换左右两幅图像的位置。以这种细致的布局和灵巧的图像控制,我们可以去掉按钮的下边框以便标签图像更好的去适应背景,如第三个版本所显示的那样。如果你的浏览器支持多个样式表的切换,你甚至可以靠它在多个版本的导航栏之间自由切换

仍有许多我们没有提到的其他的效果。快速的提一下,我改变鼠标悬停的文本色彩,但是真个图像可以替换掉以创造出更有趣的变换效果。即使标记中两个嵌套的HTML元素,也可以用CSS来达到一些我们还未想到的效果。我们在此例中创造的仅仅是水平的标签栏,但滑动门亦可应用于许多其他的情形。阁下觉得如何呢?

本文的其他语言版本
英语(alistapart.com)
意大利语(gdesign.it)
俄语(id-as.com)

点击此处参加关于本文的讨论

Translated with the permission of A List Apart Magazine and the author[s].


译者的话:第一次翻译文章,对许多用词不置可否,难免有一些错误,期待读者们的指正。

Email:mencken.wong(at)gmail.com

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
将框阴影添加到WordPress块和元素将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PM

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

使用GraphQL缓存使用GraphQL缓存Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点,那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

使您的第一个自定义苗条过渡使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

优雅且酷的自定义CSS卷轴:展示柜优雅且酷的自定义CSS卷轴:展示柜Mar 10, 2025 am 11:37 AM

在本文中,我们将深入研究滚动条。我知道,这听起来并不魅力,但请相信我,一个精心设计的页面是齐头并进的

展示,不要说展示,不要说Mar 16, 2025 am 11:49 AM

您花多少时间为网站设计内容演示文稿?当您撰写新的博客文章或创建新页面时,您是在考虑

使用Redwood.js和Fauna构建以太坊应用使用Redwood.js和Fauna构建以太坊应用Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

NPM命令是什么?NPM命令是什么?Mar 15, 2025 am 11:36 AM

NPM命令为您运行各种任务,无论是一次性或连续运行的过程,例如启动服务器或编译代码。

让我们使用(x,x,x,x)来谈论特殊性让我们使用(x,x,x,x)来谈论特殊性Mar 24, 2025 am 10:37 AM

前几天我只是和埃里克·迈耶(Eric Meyer)聊天,我想起了我成长时代的埃里克·迈耶(Eric Meyer)的故事。我写了一篇有关CSS特异性的博客文章,以及

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),