人们谈论形状 | CSS-Tricks

Codrops 有一篇关于 CSS 形状的非常棒的文章，作者是 Tania Rascia。您可能知道 shape-outside 用于重新定义文本围绕该元素浮动的区域，从而提供了一些有趣的的设计机会。但这里还有几个真正的 CSS 技巧

将 shape-outside 元素同时向右和向左浮动，以使文本在它们之间流动。
您可以将 shape-outside 设置为使用图像，并使用 shape-image-threshold 来调整文本流动的位置，这意味着您甚至可以使用渐变！

形状最近很流行，因为 Heydon Pickering 最近发布了一个关于使用它们的简短视频。他还介绍了诸如 clip-path 和 canvas 等内容

我们最近将长期存在的页面关于（基本上是伪造）CSS 形状迁移到博客文章，以便于维护。

Robin 还撰写了在网页设计中使用形状，深入探讨了所有这些内容。如此多的技巧！

查看 CSS-Tricks 在 CodePen 上的笔 10c03204463e92a72a6756678e6348d1 (@css-tricks)。

当我们谈论 CSS 形状时，我们几乎是在谈论值而不是属性。我的意思是，像 polygon()、circle()、ellipse()、offset()、path() 等值函数比它们应用到的属性更能代表“CSS 形状”。多个属性都使用它们，例如 shape-outside、clip-path 和 offset-path。

我曾经做过一个关于这个主题的完整演讲

从那时起唯一发生变化的是 Firefox 开始允许 clip-path: path() 在标志 layout.css.clip-path-path.enabled 后面使用 (演示)。

而且不要忘记 Jen Simmons 在几年前就谈到了 CSS 形状的可能性（在她的实验室演示中）！

评论