Можете ли вы добавить шум к градиенту CSS3?

можно ли добавить шум к градиенту в CSS?

вот мой код для радиального градиента:

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));
}

что бы я добавил к этому, чтобы иметь шум поверх него, чтобы придать ему текстуру?

42
css css3 gradients

8 ответов

в css нет текущего способа добавить " шум " в фон.

альтернативным решением было бы создать прозрачный шум png в графическом редакторе. Затем примените эту графику в качестве фона к <div>. Затем вам нужно будет разместить это <div> по всей площади <body> который должен затем дать вид градиента с шумом.

22

это, безусловно, самый хлопот бесплатно и лучший способ реализовать это. Это чисто CSS и очень очень просто сделать, никаких дополнительных файлов-ничего. Хорошо, это не лучший способ, но он работает очень хорошо, очень надежный (никогда не терпел неудачу при тестировании в очень старых браузерах) и очень быстро загружается.

нашел его несколько месяцев назад и использовал с тех пор, просто скопируйте и вставьте этот код в свой CSS.

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

затем добавьте свой фон цвет

background-color:#0094d0;

демо: JSFiddle

источник: https://coderwall.com/p/m-uwvg

62

вы можете использовать URI данных в CSS для программной генерации шума без необходимости ссылки на внешний файл изображения.

пример здесь просмотрите исходный код, чтобы увидеть, как это было сделано.

пост в блоге с загружаемым кодом здесь

36

да, в настоящее время нет подхода на основе CSS для текстур шума. Если вы одержимы программным (а не основанным на изображениях) подходом, вы можете попробовать использовать HTML5 canvas. Здесь есть учебник о том, как создавать шум с помощью JavaScript --> создание шума в HTML5 Canvas

однако выполнение подхода Canvas приведет к гораздо более медленному опыту для ваших посетителей, потому что A) JavaScript является интерпретируемым языком и B) написание графики с использованием JS очень медленный.

Итак, если вы не пытаетесь сделать точку зрения с помощью HTML5, я бы придерживался изображения. Это будет быстрее (для вас и для ваших пользователей, чтобы загрузить), и вы будете иметь более тонкую степень контроля над внешним видом.

8

для новизны, вот некоторый чистый шум CSS без использования URI данных (хотя он, кажется, работает только в 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>
8

хотя это не квалифицируется как истинный шум, чистый подход CSS3 будет использовать несколько селекторов повторяющегося линейного фона, которые часто используются в генераторах шаблонов.

вот несколько примеры:

с некоторой правильной комбинацией фонов, углов, цветовых остановок и прозрачности разумный шумовой эффект должен быть достижим :)

надеюсь, что устанавливает вас в правильном направление в любом случае...

7

создание текстур (шум) с помощью фильтров SVG и градиентов CSS

вы хотите шум в градиенте? Тебе повезло!

Перлин шума тип градиента шума. Стандарт SVG определяет примитив фильтра с именем <feTurbulence>, который реализует функцию Perlin. Он позволяет синтезировать искусственные текстуры, такие как облака или мрамор-шум, который вы хотите.

Шаг 1: Определите SVG Графика

создайте небольшой файл SVG под названием 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>

этот график определяет два прямоугольника. Первый заполнен сплошным цветом. Второй является полупрозрачным с применением фильтра шума. Второй прямоугольник накладывается на первый, чтобы обеспечить эффект шума.

параметры SVG

  1. кулак и самое очевидное, что вы можете изменить размеры графика. Однако CSS background-repeat свойство можно использовать для заполнения элемента, таким образом, должно хватить 300×300.

  2. фильтр

4

невозможно (даже если бы это было так, для этого потребовался бы крэптон кодовых трюков) генерировать шумовые текстуры, используя только CSS. Нет никаких новых свойств CSS3, которые обеспечивают такой эффект из коробки. Гораздо более быстрым решением является использование графического редактора, такого как Photoshop.

2