Körnige Gradienten-CSS-Tutorial-php.cn

Körnige Gradienten

Durchsuchen Sie Dribbble oder Behance, und Sie werden Designer finden, die einen einfachen Trick verwenden, um den Bildern eine Textur hinzuzufügen: Rauschen. Das Hinzufügen von Rauschen macht ursprünglich feste Farben oder glatte Gradienten (wie Schatten) realistischer. Während Designer Texturen mögen, wird Rauschen selten im Webdesign verwendet.

Dieser Artikel verwendet nur eine kleine Menge CSS und SVG, um Farbgeräusche zu erzeugen und dem Gradienten Textur hinzuzufügen. OK, lass uns etwas Geräusche erstellen!

Interaktiver Spielplatz

Klicken Sie hier, um anzuzeigen. Der schnellste Weg zu verstehen, was passiert, besteht darin, die Parameter anzupassen, aus denen die Ebene besteht.

Tipps: SVG -Rauschen und CSS -Gradienten

Die Kerntechnologie dieses Artikels basiert auf Chris Pachls Antwort auf Stack Overflow Frage: Können Sie CSS -Gradienten Rauschen hinzufügen?

Der Trick besteht darin, ein Rauschen mit einem SVG -Filter zu erstellen und dieses Rauschen dann als Hintergrund anzuwenden. Stellen Sie es unter den Gradienten, um Helligkeit und Kontrast zu verbessern, und das ist es - Sie erhalten einen allmählich dispergierten Gradienten.

Hauptzutaten

Hier ist, was wir hinter den Kulissen verwenden:

SVG -Turbulenz: Dies ist unser Geräuschfilter.
Hintergrund mit Gradienten und SVG: Als nächstes setzen wir diesen Filter als Hintergrundbild in CSS ein, das den Filter- und CSS -Gradienten kombiniert.
Verbesserung der Helligkeit und des Kontrasts: Wir wenden uns dann den CSS -Filtern zu, um die Helligkeit und den Kontrast des Rauschens zu erhöhen.
Mix-Gradienten: Schließlich können wir uns für den Mix-Blend-Modus verwenden, um die Farben weiter zu filtern und die Gradienten zu mischen.

Gehen wir ausführlich in jede dieser Abschnitte ein.

Verwendung von SVG -Turbulenz

Im SVG -Bereich können wir Filter definieren, von denen einer Perlin -Rauschen erstellen kann. Es ist bekannt<feturbulence></feturbulence> Wir können Attribute wie "Turbulenzen" oder "Rauschen" definieren und wie gut oder rau ist. Bence Szabó erklärt dies ausführlicher, da er zeigt, wie man es verwendet, um Muster zu erstellen.

<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>

Nach dem Login kopieren

Dieses SVG -Beispiel schafft einen Filter und macht a<rect></rect> Elemente, die wir für unsere körnigen Gradienten verwenden können. Bitte beachten Sie, dass SVG<filter></filter> Und<rect></rect> Definition getrennt und<rect></rect> Zitieren Sie es einfach.

Versuchen Sie, sich zu ändern<feturbulence></feturbulence> einige Attribute von.

Wir speichern diese SVG als separate Datei. Wir verweisen auf externe Links in der Demo in diesem Artikel, um SVG zu erhalten. In der Praxis verweisen Sie jedoch auf eine lokale Datei oder Ihre eigene CDN. Aus irgendeinem seltsamen Grund funktioniert das Hinweis auf SVGs über seine ID nicht, aber Sie können die SVGs in der Leitung in der Spielplatz -Demo einführen. Wir tun dies aus lesbaren Gründen nicht in der Demo.

Erstellen Sie CSS -Hintergrund mit SVG und Gradienten

Nachdem wir die SVG -Datei in einem Ort gespeichert haben, der sie auf URL oder Pfad verweisen kann, können wir sie jetzt im CSS -Hintergrund in Kombination mit Gradienten verwenden.

 <code>.noise { /* ... */ background: linear-gradient(to right, blue, transparent), url(https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560); }</code>

Nach dem Login kopieren

Die Bestellung hier ist sehr wichtig. In diesem speziellen Beispiel möchten wir, dass die feste Farbe (d. H. Kein Rauschen) zum Rauschen und dann zu einer anderen Farbe übergeht. Wir möchten auch, dass ein Ende des Gradienten transparent ist, damit das Geräusch aufgedeckt werden kann.

So was:

Dies ist jedoch nicht besonders gut, da der Lärm zu verwirrend ist. Wir müssen es vermasseln und rauer machen. Wir können passieren ...

Verbesserte Helligkeit und Kontrast

Durch das Hinzufügen eines CSS -Filters wird das Geräusch lebendiger und drückt die Dimestfarbe in Weiß oder Schwarz. Filter werden durchgehend angewendet<div> Das Blau ganz links unterscheidet sich von dem reinen Blau, das wir benutzten. `` `.noise { <em>/.../Hintergrund</em> : linear-Gradient (nach rechts, blau, transparent), URL ( <a href="https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560">https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560</a> );<br> }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>您可以随意调整对比度和亮度如何影响渐变。增强亮度和对比度会在下面的演示中突出混乱的灰色。 #### 噪点颜色不均匀如果您放大，您会注意到噪点由多种颜色组成。SVG滤镜一开始就是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用CSS混合（即mix-blend-mode和background-blend-mode）过滤颜色。 #### CSS混合让我们创建一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`</code> , legen es auf den ursprünglichen Gradienten und wenden "Mix-Blend-Modus: Multiplizieren" an, um die Dinge zu glätten.</pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p></p> <div> <div></div> <div></div> </div>

<code></code>

Nach dem Login kopieren

.noise { / ... / Hintergrund: Linear-Gradient ( 20DEG, Rebeccapurple, Transparent), URL ( https Mix-Blend-Mode: Multiplizieren Sie;

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

Nach dem Login kopieren

/ Gleich wie vor /

.isolat {Isolation: isolieren; / ... /}

 <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="Chrom -"></td>
<td title="Firefox -"></td>
<td title="Dh - -"></td>
<td title="Rand -"></td>
<td title="Safari -"></td>
</tr></tbody>

#### Mobile/Tablet

Nach dem Login kopieren

#### CSS -Filtereffekt Dieser Browser unterstützt Daten aus Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt. #### Desktop

#### Mobile/Tablet

Ich habe auch festgestellt, dass Blink-basierte Browser (wie Chrome) und Webkit-basierte Browser (wie Safari) leicht unterschiedliche Implementierungen von "Mix-Blend-Modus" haben. Testen Sie daher unbedingt über Browser hinweg, wenn Sie CSS-Mix verwenden. In meinem Projekt verwende ich Browser-spezifische Medienabfragen, um die kleinen Änderungen von CSS manuell anzupassen, um visuelle Unterschiede zu koordinieren. Das war's! Nachdem Sie SVG -Filter gemeistert haben und wie Sie sie mit CSS -Filtern als Hintergrund kombinieren können, haben Sie ein weiteres cleveres Bild, um Ihrem Design Tiefe und Textur hinzuzufügen.

Das obige ist der detaillierte Inhalt vonKörnige Gradienten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!