Pouvez-vous ajouter du bruit à un dégradé CSS ?

Question

Est-il possible d'ajouter 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));
}

Que devrais-je ajouter à cela pour avoir du bruit par-dessus, pour lui donner de la texture?

Answer 1

C'est de loin la manière la plus simple et la meilleure de mettre en œuvre cela. C'est purement CSS et très très simple à faire, aucun fichier supplémentaire - rien. Bon, ce n'est pas la meilleure façon possible, mais cela fonctionne très bien, très fiable (jamais échoué lors des tests sur de très vieux navigateurs) et très rapide à charger.

Je l'ai trouvé il y a quelques mois, et je l'ai utilisé depuis, il vous suffit de copier et coller ce code dans votre CSS.

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

Ensuite, ajoutez votre couleur de fond

background-color:#0094d0;

Démonstration : JSFiddle

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

Answer 2

Vous pouvez utiliser un URI de données dans votre CSS pour générer du bruit de manière programmatique sans avoir besoin d'un lien vers un fichier d'image externe.

Exemple ici, consultez le code source pour voir comment cela a été fait.

Billet de blog avec code téléchargeable ici

Answer 3

Il n'existe actuellement aucun moyen en css d'ajouter du "bruit" à un arrière-plan.

Une solution alternative serait de créer un png de bruit transparent dans votre éditeur graphique. Ensuite, appliquez ce graphique comme arrière-plan à une

. Vous devrez ensuite placer cette

sur l'ensemble de la zone du , ce qui donnera l'apparence d'un dégradé avec du bruit.

Answer 4

Alors que cela ne peut pas être considéré comme un vrai bruit, une approche pure CSS3 consisterait à utiliser plusieurs sélecteurs de fonds répétitifs, qui sont souvent utilisés dans les générateurs de motifs.

Voici quelques exemples:

• http://jsfiddle.net/andrewodri/eMB6E/
• http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
• http://lea.verou.me/css3patterns/

Avec la bonne combinaison de fonds, d'angles, d'arrêts de couleur et de transparence, un effet semblable au bruit raisonnable devrait être atteignable :)

J'espère que cela vous oriente dans la bonne direction de toute façon...

Answer 5

Oui, il n'y a actuellement aucune approche basée sur CSS pour les textures de bruit. Si vous insistez sur une approche programmatique (plutôt qu'basée sur une image), vous pouvez essayer d'utiliser le canevas HTML5. Il y a un tutoriel ici sur la manière de générer du bruit en utilisant JavaScript --> Créer du bruit dans Canvas HTML5

Cependant, utiliser l'approche Canvas entraînera une expérience beaucoup plus lente pour vos visiteurs, car A) JavaScript est un langage interprété, et B) écrire des graphiques en utilisant JS est très lent.

Donc, sauf si vous essayez de faire passer un message en utilisant HTML5, je vous recommande de rester avec une image. Ce sera plus rapide (à faire et à charger pour vos utilisateurs), et vous aurez un plus grand contrôle sur l'apparence.