浏览 5484 次
锁定老帖子 主题:《精通CSS》读书笔记(四)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2007-08-27
上篇。
续下面来看一下阴影。它可以用类似圆角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指向的资源可用,就会被替换成该资源的内容(如视频、图像等),否则会使用元素内部的内容。 待续... 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |