Pouvez-vous append du bruit à un dégradé CSS3?

Est-il possible d’append du bruit à un dégradé en CSS?

Voici mon code pour un dégradé radial:

body { color: #575757; font: 14px/21px Arial, Helvetica, sans-serif; background-color: #2f3b4b; background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%); background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63)); } 

Qu’est-ce que j’appendais à cela pour avoir du bruit dessus, pour lui donner de la texture?

Il n’existe aucun moyen actuel d’append du «bruit» à un arrière-plan.

Une solution alternative serait de créer un png de bruit transparent dans votre éditeur graphique. Appliquez ensuite ce graphique en arrière-plan à un

. Vous devrez alors placer ce

sur toute la zone du qui devrait alors donner l’apparence d’un dégradé avec du bruit.

C’est de loin le moyen le plus simple et le meilleur pour mettre en œuvre cela. C’est purement CSS et très très simple à faire, pas de fichiers supplémentaires – rien. Ok, ce n’est pas le meilleur moyen possible, mais ça marche très bien, très fiable (jamais échoué lors des tests sur de très anciens navigateurs) et très rapide à charger.

Trouvé il y a quelques mois, et utilisé depuis, copiez et collez ce code dans votre CSS.

 background-image: url(data:image/png;base64,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); 

Ajoutez ensuite votre couleur de fond

 background-color:#0094d0; 

Démo: JSFiddle

Source: https://coderwall.com/p/m-uwvg

Vous pouvez utiliser un URI de données dans votre CSS pour générer du bruit par programmation sans avoir besoin d’un lien vers un fichier image externe.

Exemple ici , affichez la source pour voir comment cela a été fait.

Article de blog avec code téléchargeable ici

Oui, il n’y a actuellement aucune approche basée sur CSS pour les textures de bruit. Si vous préférez une approche par programmation (plutôt que par image), vous pouvez essayer d’utiliser le canevas HTML5. Il existe un didacticiel sur la génération de bruit à l’aide de JavaScript -> Création de bruit dans le canevas HTML5

Cependant, l’approche Canvas entraînera une expérience beaucoup plus lente pour vos visiteurs, car A) JavaScript est un langage interprété, et B) l’écriture de graphiques à l’aide de JS est très lente.

Donc, sauf si vous essayez de faire un point en utilisant HTML5, je m’en tiendrai à une image. Ce sera plus rapide (pour vous et pour vos utilisateurs), et vous aurez un meilleur contrôle de l’apparence.

À des fins de nouveauté, voici du bruit CSS pur sans utiliser un URI de données (bien qu’il semble que cela ne fonctionne que dans webkit):

 #box { width:250px; height:250px; position:relative; background-size:55px 10px; background-repeat: repeat; background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%); } #box::before { content:''; width:100%; height:100%; position:absolute; mix-blend-mode:exclusion; background-size:12px 22px; background-repeat: repeat; background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%), -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%); left:0; z-index:998; } #box::after { content:''; width:100%; height:100%; position:absolute; mix-blend-mode:exclusion; background-size:15px 13px; background-repeat: repeat; background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%); left:0; top:0; z-index:999; } 
 

Bien que cela ne soit pas considéré comme du bruit réel, une approche CSS3 pure consisterait à utiliser plusieurs sélecteurs d’arrière-plan à répétition linéaire, qui sont souvent utilisés dans les générateurs de modèles.

Voici quelques exemples:

Avec une combinaison correcte d’arrière-plans, d’angles, d’arrêts de couleur et de transparence, un effet de bruit raisonnable devrait être possible 🙂

Espérons que cela vous met dans la bonne direction de toute façon …

Création de textures (bruit) à l’aide de filtres SVG et de dégradés CSS

Vous voulez du bruit dans votre dégradé? Tu es chanceux!

Le bruit de Perlin est un type de bruit de gradient. Le standard SVG spécifie une primitive de filtre appelée , qui implémente la fonction Perlin. Il permet la synthèse de textures artificielles comme les nuages ​​ou le marbre, le bruit que vous souhaitez.

Étape 1: Définir un graphique SVG

Créez un petit fichier SVG appelé noise.svg .

        

Ce graphique définit deux rectangles. Le premier est rempli d’une couleur unie. Le second est translucide avec le filtre anti-bruit appliqué. Le second rectangle est superposé au premier pour fournir un effet de bruit.

Options SVG

  1. Le plus évident est que vous pouvez modifier les dimensions du graphique. Cependant, la propriété CSS background-repeat peut être utilisée pour remplir un élément, donc 300 × 300 devrait suffire.

  2. L’atsortingbut type du filtre peut être fractalNoise ou turbulence , qui spécifie la fonction de filtrage. Les deux fournissent un visuel différent, mais à mon avis, le filtre de bruit est un peu plus subtil.

  3. L’atsortingbut baseFrequency du filtre peut être compris entre 0,5 et 0,9 pour fournir un cours à une texture fine, respectivement. Cette gamme est visuellement optimale pour l’un ou l’autre filtre à mon avis.

  4. Le fill du premier rectangle peut être modifié pour fournir une couleur de base différente. Plus tard, cependant, nous combinons essentiellement cette couleur avec un dégradé CSS translucide, qui définit également une ou plusieurs couleurs. Donc, le blanc est un bon sharepoint départ ici.

  5. L’ opacity du second rectangle peut varier de 0,2 à 0,9 pour définir l’intensité du filtre, où un nombre plus élevé augmente l’intensité.

À ce stade, vous pouvez modifier les options susmentionnées, définir ce graphique de bruit comme une image d’arrière-plan via CSS et l’appeler un jour. Mais si vous voulez un dégradé, comme le OP, passez à l’étape 2.

Étape 2: Appliquer un dégradé CSS

En utilisant la propriété background-image , vous pouvez définir le graphique de bruit SVG comme arrière-plan sur n’importe quel élément et superposer un dégradé . Dans cet exemple, je vais appliquer le graphique de bruit au corps entier et superposer un dégradé linéaire .

 body { /* white to black linear noise gradient spanning from top to bottom */ background: linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)), url('noise.svg'); } 

La fonction linear-gradient () crée une pseudo-image qui est empilée sur noise.svg . Le résultat est un dégradé translucide avec notre bruit à travers.

Options CSS

  1. La première et la plus évidente est que les couleurs de dégradé définies peuvent être modifiées. Cependant, si vous souhaitez une couleur unie sans dégradé, faites en sorte que les deux couleurs de point final soient égales. L’avantage est que vous pouvez utiliser le même graphique de bruit avec ou sans dégradé sur tout un site ou parmi des projets.

  2. Plusieurs images, créées avec les fonctions *-gradient() , peuvent être superposées sur le graphique de bruit et plus de deux parameters de couleur et angles peuvent être spécifiés dans une même fonction de dégradé pour fournir toutes sortes de visuels sympas.

  3. L’opacité des parameters du gradient, à savoir rgba () et hsla (), peut être augmentée pour intensifier la couleur définie et réduire le niveau de bruit. De nouveau, 0,2–0,9 est une plage idéale.

Conclusion

Il s’agit d’une solution hautement personnalisable et très légère (~ 400 octets) qui vous permet de définir simplement le bruit de n’importe quelle couleur ou dégradé. Bien qu’il y ait plusieurs boutons à tourner ici, ce n’est que le début. Il existe d’autres primitives de filtre SVG, telles que et , qui peuvent fournir des résultats supplémentaires.

Ce n’est pas possible (même si c’était le cas, il fallait une astuce de code pour le faire) pour générer des textures de bruit en utilisant CSS seul. Il n’y a pas de nouvelles propriétés CSS3 qui fournissent ce type d’effet hors de la boîte. Une solution beaucoup plus rapide consiste à utiliser un éditeur graphique tel que Photoshop pour le faire.