2011年10月，Adobe推出了CSSShaders作为一种在网络上实现电影特效的方法。使用CSS，可以将饱和度、灰度、减淡、折叠、卷曲甚至溶解和爆炸等特殊效果应用于常规HTML元素。这项议案已经制定。它已被公开讨论、更新并合并到CSS滤镜效果规范中。它现在将被添加到您的浏览器中。CSSShaders现在称为CSSCustomFilters，但这只是表达方式的不同。CSSFilterLabCSSFilterLab是一种基于浏览器的工具，可让您应用各种CSS过滤器、调整它们并实时查看效果（参见图1）。您可以使用此工具组合多个滤镜并为其设置动画，以创建丰富的电影效果。图1.在CSSFilterLab中创建和应用过滤器。在撰写本文时，这确实是一种黑客技术，因此只有少数浏览器支持它。因此，当您在浏览器中打开CSSFilterLab时，系统会提示您有关如何获得最佳体验的说明。我们付出了很多努力使这些说明易于理解。开始使用CSSFilterLab很容易。在浏览器中打开后，您可以从“添加过滤器”菜单中添加过滤器。您可以选择应用内置过滤器或自定义过滤器：内置过滤器是浏览器默认自带的过滤器。它们提供基本的颜色效果，例如灰度、棕褐色、饱和度或对比度。自定义过滤器将特殊效果提升到一个全新的水平。一些内置示例包括特殊效果，例如闪避、卷曲、塌陷、溶解和爆炸。自定义过滤器不是浏览器原生的；它们是由开发人员自己编写的。这些过滤器使用各种着色器，这些着色器是可以对颜色和几何形状进行细粒度控制的小程序。着色器利用硬件加速，通常用于游戏的视觉效果。它对CSS开发人员来说可能是新手，通常需要扎实的数学知识才能开发着色器。幸运的是，CSSFilterLab附带了一些带有基本着色器的自定义滤镜的优秀示例。一个示例是Fold，它为HTML元素提供折纸3D效果（参见图2）。图2.在CSSFilterLab中折叠应用于HTML元素的自定义过滤器。应用的过滤器公开它们的参数控制。这使您可以非常轻松地调整各种参数以获得所需的效果。此外，多个内置和/或自定义过滤器可以一起应用以获得惊人的效果。对结果满意后，您可以将更改保存为预设。这使得配置可以在未来重用。创建特殊效果动画特殊效果不会自行发生。它们会出现，从一种状态过渡到另一种状态。这样他们就会富有表现力。CSSFilterLab附带一组基本的动画控件，可帮助您在过滤器参数值之间创建平滑过渡。请注意屏幕底部的时间轴和控件。单击时间轴上的任意位置并更改活动过滤器的参数。这将在时间轴上创建一个新的关键帧。单击播放按钮以查看正在运行的动画（参见图3）。您可以在时间轴的长度上添加、拖放或删除关键帧，以调整动画以适应。可以通过在时间轴右侧键入来更改动画的持续时间。它以秒为单位测量。使用CSSFilterLab创建折叠动画的快速演练。(0:19)代码语法CSSFilterLab支持创建丰富的视觉效果。重要的是要知道这是使用纯CSS完成的，尽管CSS非常先进。在Adob??e，我们与合作伙伴一起努力将这项技术引入开放网络。我们不会将其隐藏在工具后面。CSSFilterLab显示了用于实现特殊效果或动画的确切代码。时间轴上方的CSS语法和CSS动画语法面板显示了您可以期待看到的内容。可以将此代码复制到您自己的项目中以利用这些效果。请记住，CSS过滤器才刚刚开始进入浏览器。创建新的自定义过滤器是一项具有挑战性的任务。但是，如果您发现复杂的数学和编写着色器特别有吸引力，您会很高兴知道CSSFilterLab包含一个全功能着色器编辑器（参见图4）。要创建新的自定义过滤器，首先从“添加过滤器”菜单下可用的过滤器中派生一个现有的自定义过滤器。您会注意到您的分叉过滤器出现在菜单的分叉选项卡中。单击“自定义”图标进入此自定义过滤器的核心。现在您可以完全控制所使用的参数、它们的类型以及片段和顶点着色器源代码。您的更改会自动保存并存储在您的浏览器本地。这些着色器是使用OpenGL着色语言(GLSL)编写的。编写着色器不在本介绍的范围内，但您可以从GLSL文档中了解更多信息。请务必检查该语言的类型、方法和属性，以充分利用您的着色器。图3.错误面板突出显示了问题。错误面板实时突出显示着色器代码中的任何问题。这非常有用，因为它可以让您在开发和预览时保持相同的上下文。您还将看到实时运行着色器代码的结果。共享和导入自定义过滤器要共享自定义过滤器，请将它们作为GitHub上CSSFilterLab的要点发布。执行此操作的控件位于着色器编辑器面板中。发布后，将链接分享给其他人。然后他们可以将您的自定义过滤器导入CSSFilterLab并在他们自己的内容上使用它。要导入自定义过滤器，请转到“添加过滤器”菜单，选择“导入”并使用此主题URL。开源CSSFilterLab的所有代码均可在GitHub上根据ApacheLicensev2免费获得。我们期待您的想法、反馈和对项目的贡献。如果您编写了想要通过CSSFilterLab分发的着色器，请将它们贡献给该项目。在签入任何代码之前，请花点时间熟悉GitHub上列出的贡献指南。下一阅读方向CSS滤镜和自定义滤镜为网页内容带来丰富的创意效果。CSSFilterLab只是对现有可能性的倒退。真正的价值掌握在您的手中，掌握您使用此技术创造的效果。想想过滤器、几何操作和电影效果可以为您的工作带来的交流和表现力的新机会。想一想这对您在大屏幕、移动设备和许多新环境中呈现内容意味着什么。使用CSSFilterLab了解现代图形网络功能并与我们分享您的想法。我们期待听到您使用它们创建的效果。Adobe的AlanGreenblatt创建了一个简短的CSSFilterLab视频演练。如果您渴望了解更多，这是一个很好的起点。另请访问html.adobe.com以了解有关Adob??e为使网络变得更美好所做的贡献的更多信息。
