一个制作Web图案的组件:css-doodle

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Web中使用一些图案做为背景图案是一种时常可见的,早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候,会通过CSS的相关技术,比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案,运用于background-image之中。

而其中最为出名的是@Lea写的CSS3 Patterns,并且@Lea在其《CSS Secrets》一书中特别介绍了CSS如何实现复杂背景图案。虽然CSS Patterns实现的图案是令人感到惊艳与好奇,但其扩展性以及适配性还是有一定的限制。因此有同学将CSS Patterns换成了SVG Patterns(也就是使用SVG相关的特性实现了CSS Patterns相同的效果)。当然,除此之外,还有很多工具能帮助我们来实现CSS图案的效果,其中有的工具可以生成代码,而有的工具会生成图片。

随着前端技术不断的革新,不久前看到一个生成Web图片的组件:<css-doodle /> —— 使用CSS绘制图案的Web组件!

这是一个非常强大的Web组件,初次看到,你会觉得她非常的神奇和强大。至于为什么?你要是花日间阅读完后面的内容,你就知道其中的原委了。为了让大家对其有初次的感觉,先上一个使用<css-doodle />组件创作的图案效果,如下:

是不是有点蠢蠢欲动的感觉。如果是的话,跟着下面的节奏继续往下阅读。

什么是<css-doodle />

<css-doodle />是一个Web组件。其基于Shadow DOM V1Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案(CSS 图案)。创建出来的图案你可以运用于Web页面中。

当你看到Custom Elements、Shadow DOM和CSS Grid的时候,你一定会心却,这些东西浏览器能支持。事实上你的担忧是正常的,因为该组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。如果你想运用于其他的浏览器上,你需要相关的Polyfilling

简单点说:

该组件通过其内部的规则(纯CSS)会生成一系列的div构建的CSS Grid。你可以使用CSS轻松地操作这些div(单元格,每个div就是一个单元格)来生成图案。生成的图案既可以是静态的,也可以是动态的。而其限制仅限于CSS本身的限制。

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/create-patterns-with-css-doodle.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部