粒子の粗い勾配

DribbleやBehanceを閲覧すると、画像にテクスチャを追加するための簡単なトリックを使用してデザイナーが見つかります：ノイズ。ノイズを追加すると、もともと固体色または滑らかなグラデーション（影など）がより現実的になります。しかし、デザイナーはテクスチャが好きですが、ノイズはWebデザインではめったに使用されません。

この記事では、少量のCSSとSVGのみを使用して、色ノイズを生成し、勾配にテクスチャを追加します。 OK、ノイズを作成しましょう！

インタラクティブな遊び場

表示するにはここをクリックしてください。何が起こっているのかを理解する最速の方法は、レイヤーを構成するパラメーターを調整することです。

ヒント：SVGノイズとCSS勾配

この記事のコアテクノロジーは、Stack Overflow質問に対するChris Pachlの答えに基づいています。CSSグラデーションにノイズを追加できますか？

トリックは、SVGフィルターを使用してノイズを作成し、そのノイズを背景として適用することです。明るさとコントラストを強化するために勾配の下に置きます。それだけです - 徐々に分散した勾配が得られます。

主な材料

これが私たちが舞台裏で使用しているものです：

• SVG乱流：これは私たちのノイズフィルターです。
• 勾配とSVGの背景：次に、このフィルターをフィルターとCSS勾配を組み合わせた背景画像としてCSSに入れます。
• 明るさとコントラストを強化します。その後、CSSフィルターに目を向けて、ノイズの明るさとコントラストを高めます。
• 混合グラデーション：最後に、ミックスブレンドモードを使用して色をさらにフィルタリングし、勾配を混ぜることを選択できます。

これらの各セクションに詳細に行きましょう。

SVG乱流の使用

SVGの領域では、フィルターを定義できます。そのうちの1つにより、Perlinノイズを作成できます。それは知られている<feturbulence></feturbulence>、それが「乱流」または「ノイズ」であるか、それがどれほど素晴らしいか粗いかなどの属性を定義できます。 BenceSzabóは、パターンを作成するためにそれを使用する方法を示しているため、これをより詳細に説明しています。

<code><svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feturbulence basefrequency="0.65" numoctaves="3" stitchtiles="stitch" type="fractalNoise"></feturbulence></filter><rect filter="url(#noiseFilter)" height="100%" width="100%"></rect></svg></code>

このSVGの例は、フィルターを作成し、aをレンダリングします<rect></rect>粒状勾配に使用できる要素。 SVGに注意してください<filter></filter>そして<rect></rect>別々に定義、そして<rect></rect>引用してください。

変更してみてください<feturbulence></feturbulence>のいくつかの属性。

このSVGを別のファイルとして保存します。この記事のデモの外部リンクを参照して、SVGを取得します。ただし、実際には、ローカルファイルまたは独自のCDNを参照します。いくつかの奇妙な理由で、IDを介してSVGを参照することは機能しませんが、Playground Demoに示したようにSVGをインラインできます。読みやすさの理由でデモでこれを行いません。

SVGと勾配でCSSの背景を作成します

SVGファイルをURLまたはパスで参照できる場所に保存した後、勾配と組み合わせてCSSのバックグラウンドで使用できるようになりました。

 <code>.noise { /* ... */ background: linear-gradient(to right, blue, transparent), url(//m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560); }</code>

ここでの順序は非常に重要です。この特定の例では、ソリッドカラー（つまり、ノイズなし）がノイズに移行し、次に別の色に移行したいと考えています。また、ノイズを明らかにできるように、勾配の一方の端を透明にしたいと考えています。

このような：

ただし、ノイズが混乱しすぎているため、これは特に良くありません。私たちはそれを台無しにし、それを粗くする必要があります。合格することができます...

明るさとコントラストの強化

CSSフィルターを追加すると、ノイズがより鮮明になり、ダメスト色を白または黒に向けます。全体にフィルターが適用されます<div>、したがって、左端の青は、私たちが使用し始めた純粋な青とは異なります。 `` `` noise { <em>/.../background</em> ：線形勾配（右、青、透明）、url（ <a href="//m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560">//m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560</a> ）;<br> }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;您可以随意调整对比度和亮度如何影响渐变。增强亮度和对比度会在下面的演示中突出混乱的灰色。 #### 噪点颜色不均匀如果您放大，您会注意到噪点由多种颜色组成。SVG滤镜一开始就是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用CSS混合（即mix-blend-mode和background-blend-mode）过滤颜色。 #### CSS混合让我们创建一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`&lt;/code&gt; 、元のグラデーションの上に置き、「ミックスブレンドモード：乗算」を適用して、物事を滑らかにします。</pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p></p> <div> <div></div> <div></div> </div>

<code></code>

.noise { / ... / background：線形勾配（20 deg、rebeccapurple、透明）、url（ //m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560 ） ;ミックス - モード：乗算;

<code>我们可以使用CSS隔离属性创建一个新的堆叠上下文并选择要混合的内容。如果我们在下一个示例中省略隔离，渐变和叠加层将与背景颜色混合。在Pen中尝试并注释掉该行！</code>

/以前と同じ/

.isolate {Isolation：asealte; / }

 <code>### 一些用例我们已经查看了一个如何制作噪点渐变的非常简单的示例，但是您可以在哪里使用它呢？让我们考虑几个用例。 #### 光线和阴影，带颗粒感渐变自然发生在哪里？例如，光线和阴影。我们可以利用CSS属性`mix-blend-mode`来平滑地混合渐变并选择性地过滤我们想要在噪点中看到的颜色。在“阴影”示例中，我们创建一个暗渐变，并将其反转以在“光线”示例中创建效果。在这两种情况下，`mix-blend-mode`都允许我们将它与其他渐变混合。 #### 全息箔大幅度的亮度和对比度增强创造了一种彩虹效果，让人联想起全息箔。 ### 进一步发展尝试游乐场并随意调整不同的参数，看看它们如何影响纹理。除此之外，以下是一些继续摆弄此技术的几种方法： - **使用不同的SVG:** 本文中的所有渐变都使用相同的SVG，但您可以调整生成噪点的参数以调整粗糙度以及游乐场中的外观和感觉。 - **尝试不同的渐变:** 除了`linear-gradient`之外，CSS还提供四种类型的渐变。你能说出它们的名字吗？（这是一个。） - **添加更多图层:** 使用CSS混合，您可以根据需要堆叠任意数量的图层并将它们混合在一起。 - **应用不同的SVG滤镜:** 有各种各样的滤镜，包括高斯模糊和不同类型的照明。此外，它们可以在CSS滤镜中引用并应用于除SVG之外的*任何*元素。您还能想到什么？请在评论中告诉我们您的发现。 ### 浏览器支持我们不能避免在这里谈论浏览器支持。此技术的核心受所有现代浏览器支持。正如您可能预期的那样，它在Internet Explorer中不起作用。也就是说，Internet Explorer确实支持SVG作为CSS中的背景（只是不支持实际的CSS滤镜属性）。 #### SVG作为CSS背景图像此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。 #### 桌面</code><thead><tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr></thead><tbody><tr>
<td title="クロム - "></td>
<td title="Firefox-"></td>
<td title="つまり - "></td>
<td title="角 -"></td>
<td title="サファリ - "></td>
</tr></tbody>

####モバイル/タブレット

以上が粒子の粗い勾配の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。