论坛首页 Web前端技术论坛

《精通CSS》读书笔记(四)

浏览 5484 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-08-27  
CSS
上篇

下面来看一下阴影。它可以用类似圆角border的方式达成。

1. 简单的CSS阴影和Clagnut阴影

实现:在外层wrapper上将阴影图设为背景。元素本身通过margin或者相对定位做向左上方的偏移(以展现右下方向的阴影)。

限制:
* 阴影元素需要一个外层的wrapper元素。

2. 模糊阴影

实现:添加两层container,分别应用阴影图像和蒙板图像。

限制:
* 需要两个外层元素
* 外层背景色是固定的(与蒙板颜色一致)。洋葱皮阴影无此问题。

注意,蒙板需要png的alpha透明特性,但是IE6不支持。书中给出了使用AlphaImageLoader的filter方式,但是问题在于,在IE中与其这样,不如直接在元素上使用DropShadow或Shadow的filter。

3. 洋葱皮阴影

实现:添加两层container,分别应用两个阴影末尾图。

限制:
* 需要两个外层元素
* 外层背景色是固定的,但稍作改进可以避免这一限制。

总的来说,上述的阴影实现,都不是很好的方法,最好还是借助脚本。

最后是图像替换。

关于图像替换,除了本书作者所说的screen reader问题外,另一个问题是,在许多浏览器上,图像不会跟文本一起缩放。所以我的观点是尽量避免使用图像替换。本书作者提出的“公司品牌策略要求特定字体”的例子,我认为不足为证。如果真的需要这样强的视觉强制要求,也肯定不以字体为限,最好直接使用flash。

此外,display:none或visibility:hidden(译本有疏漏)会造成screen reader失效,这其实很大一部分是screen reader本身的问题。因为本身CSS可以只针对media=screen指定图像替换样式。但是许多screen reader忽视了CSS规范(多数是基于IE的)。

所以目前最可靠的图像替换法,仍是利用脚本的,如本书中的IFR和sIFR。

另,在XHTML2中,不需要专门的图像替换法。因为所有元素上都支持src属性。如果src指向的资源可用,就会被替换成该资源的内容(如视频、图像等),否则会使用元素内部的内容。

...
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics