web-dev-qa-db-fra.com

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

Est-il possible d'ajouter du bruit à un dégradé en CSS?

Voici mon code pour un gradient 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'ajouterais à cela pour avoir du bruit dessus, pour lui donner de la texture?

csscss3gradient
45
austin

Il n'y a aucun moyen actuel dans css d'ajouter du "bruit" à un arrière-plan.

Une solution alternative serait de créer un png transparent de bruit dans votre éditeur graphique. Appliquez ensuite ce graphique comme arrière-plan à un <div>. Vous devrez alors placer ce <div> sur toute la zone du <body> qui devrait alors donner l'apparence d'un dégradé avec du bruit.

22
Ben Rowe

C'est de loin le moyen le plus simple et le plus simple de 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 la meilleure façon possible, mais cela fonctionne très bien, très fiable (n'a 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 simplement 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

66
tim.baker

Par souci de nouveauté, voici du bruit CSS pur sans utiliser d'URI de données (bien qu'il semble ne fonctionner que dans le 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;
}
<div id="box"></div>
12
fanfare

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!

bruit Perlin est un type de bruit de gradient. La norme SVG spécifie une primitive de filtre appelée <feTurbulence> , qui implémente la fonction Perlin. Il permet la synthèse de textures artificielles comme les nuages ​​ou le marbre - le bruit que vous voulez.

Étape 1: définir un graphique SVG

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

<svg
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'
  width='300' height='300'>

    <filter id='n' x='0' y='0'>
            <feTurbulence
              type='fractalNoise'
              baseFrequency='0.75'
              stitchTiles='stitch'/>
    </filter>

    <rect width='300' height='300' fill='#fff'/>
    <rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>

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

Options SVG

  1. Le premier et 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'attribut type du filtre peut être fractalNoise ou turbulence, qui spécifie la fonction de filtre. Les deux offrent un visuel différent, mais à mon avis, le filtre de bruit est un peu plus subtil.

  3. L'attribut baseFrequency du filtre peut aller de 0,5 à 0,9 pour fournir un cours à une texture fine, respectivement. Cette plage 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 des couleurs. Le blanc est donc un bon point de départ ici.

  5. Le opacity du deuxième rectangle peut aller 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 image d'arrière-plan via CSS et l'appeler un jour. Mais si vous voulez un dégradé, comme l'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 gradient . Dans cet exemple, je vais appliquer le graphique de bruit à l'ensemble du corps et superposer un gradient 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 gradient translucide avec notre bruit qui le traverse.

Options CSS

  1. Tout d'abord, et le plus évident, c'est que les couleurs de dégradé définies peuvent être modifiées. Cependant, si vous voulez une couleur unie sans dégradé, assurez-vous que les deux couleurs de fin sont égales. L'avantage est que vous pouvez utiliser le même graphique de bruit avec ou sans dégradé sur 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 paramètres de couleur et angles peuvent être spécifiés dans une seule fonction de dégradé pour fournir toutes sortes de visuels sympas.

  3. L'opacité des paramètres de dégradé, c'est-à-dire. rgba () et hsla () - peuvent être augmentés pour intensifier la couleur définie et réduire le niveau de bruit. Encore une fois, 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 <feGaussianBlur> et <feColorMatrix> , qui peuvent fournir des résultats supplémentaires.

10
Clint Pachl

Oui, il n'existe actuellement aucune approche CSS pour les textures de bruit. Si vous êtes déterminé à adopter une approche programmatique (plutôt que basée sur une image), vous pouvez essayer d'utiliser le canevas HTML5. Il y a un tutoriel ici sur la façon de générer du bruit en utilisant JavaScript -> Création de bruit dans HTML5 Canvas

Cependant, faire 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, à moins que vous n'essayiez de faire valoir un point en utilisant HTML5, je m'en tiendrai à une image. Ce sera plus rapide (pour vous de faire et pour vos utilisateurs de charger), et vous aurez un degré plus fin de contrôle sur l'apparence.

8
derrylwc

Bien que cela ne soit pas considéré comme du vrai bruit, 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 motifs.

Voici quelques exemples:

Avec une bonne combinaison d'arrière-plans, d'angles, de couleurs et de transparence, un effet de bruit raisonnable devrait être réalisable :)

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

7
Andrew Odri

Il n'est pas possible (même si c'était le cas, il faudrait 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 genre d'effet hors de la boîte. Une solution beaucoup plus rapide consiste à utiliser un éditeur graphique tel que Photoshop pour ce faire.

2
BoltClock

J'ai trouvé un moyen sans aucune image avec radial-gradient et un seul div.

Tout d'abord, je veux montrer un exemple avec un gradient radial. Disons que nous voulons créer un cercle aux coordonnées que nous voulons. Le premier cercle est x=120y=80, le deuxième cercle est x=20y=20. Pour mieux comprendre la fonction que nous écrirons ci-dessous, nous pouvons considérer cet exemple.

.a {
border:1px solid blue;
  width:500px;
  height:200px;
  background: radial-gradient(circle at 120px 80px, red 0px 10px, transparent 10px 100px);
}

.b {
border:1px solid red;
  width:500px;
  height:200px;
  background: radial-gradient(circle at 20px 20px, blue 0px 10px, transparent 10px 100px);
}
<div class="a"></div>
<div class="b"></div>

Nous allons écrire une fonction @mixin pour des milliers de gradients de ligne.

Une fonction SCSS:

@mixin gradient($color, $width, $height, $noiseCount) {
  $value: ();
  @for $i from 1 through $noiseCount {
    $gradient: radial-gradient(
      circle at #{random($width)}px #{random($height)}px,
      $color 0px,
      $color 1px,
      transparent 1px,
      transparent 100%
    );
    $value: append($value, $gradient, comma);
  }
  background: $value;
}

Usage:

div {
  width:400px;
  height: 150px;
  @include gradient(#ffad3e, 400, 150, 2500);
}

Résultat

Si nous voulons créer des bruits en fonction de la valeur%?

Nous pouvons utiliser cette fonction pour cela.

@mixin gradient($color, $width, $height, $noiseCount) {
  $value: ();
  @for $i from 1 through $noiseCount {
    $gradient: radial-gradient(
      circle at #{(random($width * 10)) / 10}% #{random($height)}px,
      $color 0px,
      $color 1px,
      transparent 1px,
      transparent 100%
    );
    $value: append($value, $gradient, comma);
  }
  background: $value;
}

div {
  width:100%;
  height: 150px;
  @include gradient(#ffad3e, 100, 150, 2500);
}

Résultat

0
dgknca