应用阴影的最佳方法是什么?我现在在一个网站上工作,我们有很多这样的网站,但是,我一直在努力寻找最好的方法来做到这一点。该网站的动画很重,因此阴影需要与此配合良好。
我尝试了一个jQuery阴影皮肤。阴影看起来很好并且易于使用,但速度很慢,并且不适用于任何动画(需要大量重绘,非常慢跑)。
我还尝试创建自己的jQuery扩展,将我的元素包装在几个灰色div中,然后稍微偏移它们以产生阴影效果。这很好用。它快速响应动画。然而,它使得DOM操作/遍历变得麻烦,因为所有内容都包含在这些阴影div中。
我知道必须有一个更好的方法,但这不完全是我的强项。想法?
答案 0 :(得分:3)
ShadedBorder是一个外观漂亮且易于使用的Shadow-Library。检查出来
答案 1 :(得分:1)
你不需要将那些shadow-div包裹在其他内容周围,只需稍微设置它们并将它们放在较低的z-index上! - )
答案 2 :(得分:0)
如果你的主要问题是导航DOM,只需在你的元素中添加一个类和/或id,并用JQuery选择器引用它。如果将ref存储在变量中会更好,所以你不需要太频繁地选择它
答案 3 :(得分:0)
虽然尚未获得完整的跨浏览器支持,但您可以尝试使用CSS 3 text-shadow property。
答案 4 :(得分:0)
这在很大程度上取决于您的图像需要更改的频率,以及它们将覆盖的彩色区域。因为我猜你需要注意IE6的合规性,所以大多数alpha-PNG解决方案会引起如此可怕的紧张情绪,以至于你会花费更多时间进行性能优化,而不是你想要猜测的。
为了解决这个问题,由于我们的图像每月修改不到一次,我们通过缓存PHP脚本调用图像,该脚本使用预定义的背景颜色自动应用阴影,因此我们不必依靠任何透明度。这导致更快的下载(更少的HTTP请求)和更快的界面,因为工作中的Javascript / CSS魔法更少。
我知道这是一个非常老派的解决方案,如果你的图像是静态的,上述解决方案是完全可以接受的,但是跨浏览器兼容并且动画可能会迫使你做出这种风格的解决方案。 / p>