Gradients granuleux-tutoriel CSS-php.cn

Gradients granuleux

Parcourez Dribbble ou Behance et vous trouverez des concepteurs en utilisant une astuce simple pour ajouter de la texture aux images: le bruit. L'ajout de bruit rend les couleurs unis à l'origine ou les gradients lisses (comme les ombres) plus réalistes. Mais alors que les concepteurs aiment les textures, le bruit est rarement utilisé dans la conception Web.

Cet article n'utilisera qu'une petite quantité de CSS et de SVG pour générer du bruit de couleur et ajouter de la texture au dégradé. Ok, créons du bruit!

Terrain de jeu interactif

Cliquez ici pour voir. Le moyen le plus rapide de comprendre ce qui se passe est d'ajuster les paramètres qui composent la couche.

CONSEILS: SVG Noise et CSS Gradient

La technologie de base de cet article est basée sur la réponse de Chris Pachl à la question du débordement de pile: pouvez-vous ajouter du bruit aux gradients CSS?

L'astuce consiste à créer un bruit à l'aide d'un filtre SVG, puis à appliquer ce bruit comme arrière-plan. Placez-le sous le gradient pour améliorer la luminosité et le contraste, et c'est tout - vous obtenez un dégradé progressivement dispersé.

Ingrédients principaux

Voici ce que nous utilisons dans les coulisses:

Turbulence SVG: c'est notre filtre à bruit.
Contexte avec gradient et SVG: Ensuite, nous mettons ce filtre dans CSS comme image de fond qui combine le filtre et le gradient CSS.
Améliorer la luminosité et le contraste: nous nous tournons ensuite vers les filtres CSS pour augmenter la luminosité et le contraste du bruit.
Mélange des gradients: Enfin, nous pouvons choisir d'utiliser le mode mélange de mélange pour filtrer davantage les couleurs et mélanger les gradients.

Passons en détail dans chacune de ces sections.

Utilisation de la turbulence SVG

Dans le domaine SVG, nous pouvons définir des filtres, dont l'un nous permet de créer un bruit de perlin. il est connu<feturbulence></feturbulence> , nous pouvons définir des attributs tels qu'il s'agit de la "turbulence" ou du "bruit", et à quel point il est fin ou rugueux. Bence Szabó explique cela plus en détail, car il montre comment l'utiliser pour créer des modèles.

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

Copier après la connexion

Cet exemple SVG crée un filtre et rend un<rect></rect> Éléments, que nous pouvons utiliser pour nos gradients granulaires. Veuillez noter que SVG<filter></filter> et<rect></rect> Définition séparément, et<rect></rect> Il suffit de le citer.

Essayez de changer<feturbulence></feturbulence> Quelques attributs de.

Nous enregistrons ce SVG en tant que fichier séparé. Nous faisons référence aux liens externes dans la démo de cet article pour obtenir SVG. Cependant, dans la pratique, vous référerez un fichier local ou votre propre CDN. Pour une raison étrange, référencer les SVG via son identifiant ne fonctionne pas, mais vous pouvez aligner les SVG comme nous l'avons montré dans la démo de terrain de jeu. Nous ne faisons pas cela dans la démo pour des raisons de lisibilité.

Créer un arrière-plan CSS avec SVG et Gradient

Après avoir stocké le fichier SVG dans un endroit qui peut le référencer par URL ou chemin, nous pouvons maintenant l'utiliser dans l'arrière-plan CSS, combiné avec des gradients.

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

Copier après la connexion

L'ordre ici est très important. Dans cet exemple particulier, nous voulons que la couleur unie (c'est-à-dire pas de bruit) passe au bruit puis à une autre couleur. Nous voulons également qu'une extrémité du gradient soit transparente afin que le bruit puisse être révélé.

Comme ça:

Cependant, ce n'est pas particulièrement bon car le bruit est trop déroutant. Nous devons gâcher et le rendre plus rugueux . Nous pouvons passer ...

Luminosité et contraste améliorés

L'ajout d'un filtre CSS rend le bruit plus vif, poussant la couleur dimers vers le blanc ou le noir. Des filtres sont appliqués tout au long<div> , donc le bleu à l'extrême gauche est différent du bleu pur que nous avons commencé à utiliser. `` `.NOISE {/ <em>...</em> / fond: Linear-Gradient (à droite, bleu, 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> , le plaçons sur le gradient d'origine et appliquons le mode mélange de mélange: multiplier; 'pour lisser les choses.</pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p></p> <div> <div></div> <div></div> </div>

<code></code>

Copier après la connexion

.Noise {/ ... / Background: Linear-Gradient (20Deg, Rebeccapurple, transparent), URL ( https://www.php.cn/link/A41A6A3856EE3C8C2816D4828B64F560 ); mélange de mélange: multiplier;}

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

Copier après la connexion

/ Identique avant /

.isolate {Isolation: isolat ;

 <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="Chrome -"></td>
<td title="Firefox -"></td>
<td title="IE -"></td>
<td title="Bord -"></td>
<td title="Safari -"></td>
</tr></tbody>

#### mobile / tablette

Copier après la connexion

#### Effet de filtre CSS Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard. #### Desktop

#### mobile / tablette

J'ai également remarqué que les navigateurs basés sur des clignements (tels que Chrome) et les navigateurs basés sur WebKit (tels que Safari) ont des implémentations légèrement différentes de «mix-mélange-mode», alors assurez-vous de tester entre les navigateurs si vous utilisez CSS Mix. Dans mon projet, j'utilise des requêtes multimédias spécifiques au navigateur pour ajuster manuellement les petits ajustements de CSS pour coordonner les différences visuelles. C'est ça! Maintenant que vous avez maîtrisé les filtres SVG et comment les combiner avec des filtres CSS comme arrière-plans, vous avez un autre visuel intelligent pour ajouter de la profondeur et de la texture à votre conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!