1. 首页
  2. css

带有CSS剪辑路径的粗略化身

以下是Ryan Scherf的客串帖子。Ryan找到了一种巧妙的方法来给化身一种粗糙、不平、多变的边缘。有点像是被一个不太会用剪刀的人用剪刀剪下来的。很好的是,它自然是一种渐进式的增强技术,只需通过CSS就可以实现,而像Quirky这样有创意又有趣的品牌,我们总是在考虑如何将这种氛围带到网络上。在整个网站,有一个\”手绘\”看一些元素。如果不使用大量的图像,很难得到那种手绘的感觉。有了一些简单的三角学和CSS\”clip-path的基础知识,我们就可以相对轻松地完成这项工作,并且有很好的性能。请注意每个图像上的边缘不均匀且变化很大。为什么不使用图像遮罩?
例如,SVG中定义的掩码:
img {mask: url(mask.svg) top left / cover;}
mask属性可以引用外部SVG或文档中按ID定义的SVG。
但是如果您希望显示的每个化身都有一个唯一的形状,而不是相同的形状,该怎么办?您可以通过编程生成许多不同的SVG形状来应用。但是我们可以通过用(s)CSS生成clip-path来实现同样的事情并得到数学生成。
h3>svg>?
浏览器对clip-path的支持,当与polygon()这样的形状值一起使用时,是Chrome 24+、Safari 7+、Opera 25+、iOS 7.1+、Android 4.4+。Firefox只支持带有SVG中定义的路径的clip-path(我们将介绍这一点)。在IE中还没有支持。
你需要使用-webkit-clip-path,因为这是目前唯一支持它的方法,但最好还是把clip-path放在上面。如果IE或Firefox开始以这种方式支持它,它很可能是无前缀的。
,polygon的形状是最好的,因为它给了我们最多的点数和灵活性来创建手绘效果。
您给polygon()一个X,Y点值列表,如: , , … 。这将在你的点周围绘制一条路径,按顺序排列,并在新创建的形状外部裁剪任何内容。我们的六边形很酷,但还没有达到真正的粗略效果。它很僵硬——线条太少了。思考手绘图形的最佳方法是一系列连接两个点的小线条。我们拥有的点越多,我们创造的短线就越多。事实上,有了足够的点,我们就可以使polygon的形状如此光滑,模仿circle。
这里有一个使用200点的例子:这些点来自哪里?这里有一点数学知识。也许你高中时学过三角学?你在那门课上学到的一个基本概念是关于单位圆的。基本上,有一个集合公式(给定π)可以在一个圆周围生成任意数量的点。
单位圆(通过维基百科)如果我们要连接我们的线段,我们会得到这样的形状:
连接点!
仍然有点僵硬,但看起来也有点手绘。更多点!
我们知道如何用clip-path: polygon()画六边形和圆,那么我们如何使它看起来像手绘的?调整点数(点数越多,线段长度越短)添加一些X和Y方差(因此线段不均匀)
让我们将其引入SCSS,并创建一个函数来为我们做脏工作。我们将使用:
– sin()
最相关的数学是:
/*To generate an arbitrary points onthe unit circle at angle t */$x: cos(t);$y: sin(t);
把它放在正确的语法中看起来像:
$w: 160px// Avatar width$n: 60;// Number of points on the circle@function sketchAvatar() {$points: ();@for $i from 0 through $n {$points: append($points, ($w / 2) * (1 + cos((2 * pi() * $i / $n))) ($w / 2) * (1 + sin((2 * pi() * $i / $n))), comma);}@return $points;}
这有点毛茸茸的。我们从形状的中上角开始,为60个均匀分布的点生成圆周围的点集列表。将其与方差结合起来
上面的代码仍然生成相当平淡和均匀的多边形,因此我们必须添加方差。我们所需要做的就是调整任何方向的点,以提供我们正在寻找的偏移感觉。$lower和$upper的方差数字可以是任何取决于您想要的外观的数字。
$w:120px;// Overall width@function sketchAvatar() {$n:60;// Number of points$lower: -80;// Lower variance$upper: 80;// Upper variance$points: ();@for $i from 0 through $n {$points: append($points, ($w / 2) * (1 + cos((2 * pi() * $i / $n))) + (rand($lower, $upper) / 100) ($w / 2) * (1 + sin((2 * pi() * $i / $n))), comma);}@return $points;}
我们做到了!粗略地说,独特的化身与CSSclip-path: polygon():
使其工作在火狐克里斯这里!我想,既然Firefox不支持这种方式,但支持SVG语法,我们可以多填充它

带有CSS剪辑路径的粗略化身 为WP2原创文章,链接:https://www.wp2.cn/css/%e5%b8%a6%e6%9c%89css%e5%89%aa%e8%be%91%e8%b7%af%e5%be%84%e7%9a%84%e7%b2%97%e7%95%a5%e5%8c%96%e8%ba%ab/