非常实用的CSS艺术

CSS艺术作品一直让我着迷，尽管我很少亲自尝试。虽然熟悉许多技巧，但每次看到创作者用简单的盒子构建出流畅美丽的图像，仍然感到惊讶不已。我经常使用开发者工具研究其背后的奥秘，却从未亲眼目睹创作过程。

每当CSS艺术作品受到关注，总有人会评论“这并不实用”或“直接用SVG就好了”，诸如此类的说法既轻率又乏味。即使这些说法属实，这也是个糟糕的论点——没有人被要求时刻都追求实用性。那样的话，世界将会多么无趣！

十月，我有幸观看了我最喜欢的CSS艺术家之一Lynn Fisher（Twitter, CodePen）的单div创作直播。我曾误以为单div作品依赖于极其复杂的盒影——几乎是一种像素艺术方法。我不确定这个想法从何而来，可能是几年前看到有人这么做过。但她的创作过程比我预想的要“正常”和“实用”得多：她巧妙地运用了一些分层、缩放和定位的背景渐变。

等等，我知道怎么做！并非技术本身具有魔力，而是她将几个渐变转化为一块内部有蛋糕的奶酪的胆识！

我之前在客户项目中都使用过这些属性。我创建过渐变，分层图像，调整大小和位置以实现各种效果。这些都不是什么新鲜事，也不复杂或激进。我并没有学习到任何关于CSS本身的新知识。但这极大地改变了我对这些简单工具所能实现功能的认知。

几周内，我就将这种技巧应用到了生产环境中。同样，这没有什么奇特或复杂之处——它就像唾手可得的低垂果实，在这种情况下，自定义SVG显得略微笨重。这是我为个人项目创建的效果，使用了一些自定义属性来简化调整：

上周，我们在一个非常实用且官方的客户组件库中使用了类似的技巧。这是Stacy Kvernmo的想法，效果非常好。

感谢Lynn，以及所有其他才华横溢的CSS艺术家！感谢你们向我们展示了我们热爱的这门语言以及我们每天使用的那些“非常严肃”的工具所能达到的高度。

以上是非常实用的CSS艺术的详细内容。更多信息请关注PHP中文网其他相关文章！