我们向我们敬佩的网页构建者提出了同一个问题:今年你从网站构建中学到了什么? 以下是 他们的回答

我们感谢我们的 ❥ 赞助商 Automattic 使这个网站成为可能。他们制作了许多我们使用的优秀软件产品,例如 JetpackWooCommerceWordPress.com

非常实用的 CSS 艺术

我一直很喜欢人们创作的 CSS 艺术,但我自己却很少尝试。我熟悉其中的许多技巧,但每次看到它们还是会感到惊讶:人们是如何用这些小方块制作出如此流畅美丽的图像的。我总是会在开发工具中到处搜索,看看它们是怎么做到的,但我从未见过完整的过程。

每当 CSS 艺术开始引起人们的注意时,总有人会说:“那不实用”或“直接用 SVG”之类的话,这令人沮丧且无聊。这是一个可怕的论据,即使它是真的——没有人被要求永远实用。那样的世界会多么糟糕。

10 月份,我花时间观看了我最喜欢的 CSS 艺术家之一 Lynn FisherTwitterCodePen现场直播她的单 div 过程。我脑海中总是认为单 div 作品依赖于非常复杂的 box-shadow——几乎是一种像素画风格。我不确定这个想法从哪里来的,可能是我几年前看到有人这样做。但她的过程比我意识到的更“正常”和“实用”:一些合理分层、大小和定位的背景渐变。

Examples of Lynn Fischer's single div projects: repeated polar bears, plants on a shelf, a blinking light, and a tiny electronic piano.

等等。我知道怎么做。并不是技术本身神奇——而是将几个渐变变成一块带有蛋糕的奶酪的大胆尝试!

我以前在客户项目中使用过所有这些属性。我创建了渐变,分层图像,调整它们的大小并定位它们以实现各种效果。这些都不新鲜、不复杂、不激进。我并没有真正学到关于 CSS 本身的任何新东西。但这对我对这些简单工具能实现什么的 看法产生了巨大的影响。 

几周后,我在生产中使用了它。再说一次,它没什么花哨或复杂——完美的低垂果实,用自定义 SVG 会显得 略微 太臃肿。这是我在个人项目中创建的效果,使用了一些自定义属性使调整更容易

上周,我们使用类似的技巧作为一项非常实用且官方的客户组件库的一部分。这是 Stacy Kvernmo 的主意,效果很好。

感谢 Lynn,以及所有其他优秀的 CSS 艺术家!感谢你们向我们展示了我们能将我们热爱的这种语言以及我们每天使用的非常严肃的工具推向多远。