带有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剪辑路径的粗略化身

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么