Houdini

CSS如何实现内凹角效果

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力,把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果:CSS如何实现内凹角的效果

CSS Houdini和CSS Paint API

很长时间以来,我都没有对浏览器新的技术感到兴奋。Houdini是一个强大的项目,它给开发者提供了比以往任何时候都还要更强大的CSS能力。这个项目的第一部分是CSS Paint API。这篇文章将解释为什么Houdini会如此令人兴奋,然后再告诉你如何开始使用CSS Paint API。

CSS Paint API

CSS Paint API是W3C规范中之一,目前的版本是Level1。它也被称为CSS Custom Paint或者Houdini's Paint Worklet。对于开发者而言,有一个值得高兴的是,Chrome65将会支持该API。也就是说,可以使用CSS Paint API提供的registerPaint(name, paintCtor)做一些事情。那么CSS Paint API是什么?你能用它做什么?它又是如何工作的呢?带着一系列的为什么,我们开启对CSS Paint API的初探。

使用CSS Houdini制作平滑的圆角

最近,我在Twitter分享了一篇关于用户界面的文章。我喜欢Illusions,但这对我来说是一个新的东西:一个修正的圆比几何图形看起来更圆!圆角矩形也是这样。令人惊讶的是,我还发现,自iOS7以来,苹果一直在使用这个技巧。在数学上,它被称为Lamé Curve or Superellipse

CSS魔术师Houdini API介绍

今天想继续 CSS 的议题,常常会觉得学 CSS 的新技术不太划算,因为每次看到新的 Feature 出现,都只能当下兴奋几分钟,然后就会认命接受可能还要再等个五年才能真正使用的可能性…如果你有跟我一样的感受,那今天这篇文章或许可以带给你一丝丝希望。

Houdini:也许是你从未听过的在CSS领域最令人兴奋的发展

你是否曾经试过想使用某个CSS特性但是却因为他没有被所有浏览器支持而不能用?又或者更糟糕的,他被全部浏览器支持,但是这种支持充满了bug、表现不一致甚至是不完全兼容的?如果这些事情曾经在你身上发生过——并且我打赌他们绝对发生过——那么你就需要关注一下Houdini。Houdini是一个新的W3C工作组,他们致力于让这些问题永远消失。他们计划通过引入一整套API来让开发者首次拥有扩展CSS的权利,并且会提供出一套工具来与浏览器的渲染引擎的样式与布局进行挂钩。但是这意味着什么呢?这是一个好的提议吗?这会如何帮助我们开发者在现今与未来构建网页呢?

返回顶部