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

Question

Можете ли вы добавить шум к градиенту 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));
}

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

68

css css3 gradient gradients

Источник

user485424 25 окт '10 в 00:08

11 ответов

Решение

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

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

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

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

background-color:#0094d0;

Демо: JSFiddle

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

119

Источник

user1082555 21 дек '12 в 19:39

Создание текстур (шум) с использованием фильтров 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

Первое и самое очевидное, что вы можете изменить размеры графика. Тем не менее, CSS background-repeat свойство может быть использовано для заполнения элемента, поэтому должно быть достаточно 300×300.
Фильтра type атрибут может быть fractalNoise или же turbulence, который определяет функцию фильтра. Оба обеспечивают различный визуальный эффект, но, на мой взгляд, шумовой фильтр немного более тонкий.
Фильтра baseFrequency Атрибут может варьироваться от 0,5 до 0,9, чтобы обеспечить курс для тонкой текстуры, соответственно. По моему мнению, этот диапазон визуально оптимален для любого фильтра.
Первый прямоугольник fill можно изменить, чтобы обеспечить другой базовый цвет. Позже, однако, мы по существу объединяем этот цвет с полупрозрачным градиентом CSS, который также определяет цвет (ы). Так что белый цвет - хорошая отправная точка здесь.
Второй прямоугольник opacity может варьироваться от 0,2 до 0,9, чтобы установить интенсивность фильтра, где большее число увеличивает интенсивность.

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

Шаг 2. Применение градиента CSS

С использованием background-image Свойство, вы можете установить графику шума SVG в качестве фона для любого элемента и наложить градиент. В этом примере я применю графику шума ко всему телу и наложу линейный градиент.

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

Функция linear-Gradient() создает псевдоизображение, которое накладывается поверх noise.svg. Результатом является полупрозрачный градиент с нашим шумом, просвечивающим через него.

Настройки CSS

Первое, и самое очевидное, это то, что определенные цвета градиента могут быть изменены. Однако, если вы хотите получить сплошной цвет без градиента, сделайте два конечных цвета равными. Преимущество заключается в том, что вы можете использовать одну и ту же графику шума с или без градиента по всему сайту или среди проектов.
Несколько изображений, созданных с помощью *-gradient() функции, могут быть наложены на графику шума и более двух цветовых параметров и углов могут быть указаны в одной функции градиента, чтобы обеспечить все виды прохладных визуальных эффектов.
Непрозрачность параметров градиента - т.е. rgba() и hsla() - может быть увеличена для усиления определенного цвета и снижения уровня шума. Опять же, 0,2–0,9 - идеальный диапазон.

Заключение

Это очень настраиваемое и очень легкое (~400 байт) решение, которое позволяет просто определять шум любого цвета или градиента. Хотя здесь нужно повернуть несколько ручек, это только начало. Существуют другие примитивы фильтра SVG, такие как <feGaussianBlur> а также <feColorMatrix>, что может дать дополнительные результаты.

41

Источник

user41906 05 мар '18 в 10:25

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

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

Сообщение в блоге с загружаемым кодом здесь

36

Источник

user889725 11 авг '11 в 10:49

Для новизны приведем чистый 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>

21

Источник

user1975224 18 июл '16 в 06:13

Сейчас 2023 год, так что вот мой ответ: лучшим вариантом будет легкий встроенный SVG-фильтр и одно объявление CSS... которое включает фоновый градиент. Никаких внешних файлов, ничего в base64. Кроме того, он хорошо сохраняет незернистый градиент, поскольку не портит его контрастность или яркость.

Фильтр SVG будет выглядеть следующим образом:

      <svg width='0' height='0'>
  <filter id='grainy' x='0' y='0' width='100%' height='100%'>
    <feTurbulence type='fractalNoise' baseFrequency='.537'/>
    <feColorMatrix type='saturate' values='0'/>
    <feBlend in='SourceGraphic' mode='multiply'/>
  </filter>
</svg>

Код CSS будет выглядеть следующим образом:

      background: filter(radial-gradient(circle, red, tan), url(#grainy))

В чем подвох?

Ну, на данный момент (начало января 2023 года) он нигде не работает, хотя вскоре он должен начать работать в Safari. Safari — единственный браузер, в котором реализована функция, которая позволяет нам применять a только кbackground-imageслой, не затрагивая текстовое содержимое или потомков элемента . Прямо сейчас, даже в Safari, это работает только наurl()изображений, хотя вскоре он должен работать и с градиентами CSS .

Мы все еще можем сделать это, и это работает в разных браузерах:

      background: radial-gradient(circle, mediumturquoise, darkslateblue);
filter: url(#grainy)

живая демонстрация

Однако, как упоминалось выше, это влияет на весь элемент, на котором он установлен, включая потомков и текстовое содержимое.

Чтобы этого избежать, нам нужно переместитьbackgroundи объявления на псевдо, абсолютно позиционированном, за содержимым его родителя, покрывающем область всего его родителя - живая демонстрация.

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

Итак, вот ссылки на ошибки для этого в других браузерах:

Еще одна вещь: если вам не нужна зернистость, просто приятно иметь визуальное улучшение, вы можете сохранить градиент в--gradпользовательское свойство и иметь:

      div {
    --grad: radial-gradient(circle, mediumturquoise, darkslateblue);
    background: var(--grad);
    
    @supports (background: filter(conic-gradient(red, tan), blur(1px))) {
        background: filter(var(--grad), url(#grainy))
    }
}

Для всех, кто заинтересован, разбивка фильтра SVG:

этотsvgсуществует только для хранения , он фактически не будет использоваться для отображения чего-либо, поэтому мы обнуляем его размеры (и в идеале также получаем его из потока с помощьюposition: absoluteв СС); никаких других атрибутов для него не требуется, когда он встроен (если вы хотите переместить его во внешний файл, вам придется добавитьxmlns='http://www.w3.org/2000/svg')
явно нуждается вidдля ссылки, но по умолчанию эффект фильтра также будет проливаться (актуально дляfeTurbulence) вне элемента, к которому он применяется10%во всех направлениях (значения по умолчанию дляxиyявляются-10%и дляwidthиheightявляются120%), поэтому мы хотим ограничить его только областью элемента, от до100%по обеим осям (в качестве альтернативы, если вам не хочется устанавливать все эти атрибуты, я думаю, вы могли бы установитьclip-path: inset(0)в СС; Обратите внимание, чтоoverflow: hiddenне обрежет его, поскольку это только скрывает содержимое элемента, выходящее за пределы его padding-box, но не графические эффекты на реальном элементе, такие как эффекты, создаваемыеfilter)
первый примитив фильтра создает шумовой слой; Я не совсем понимаю, как это работает — есть эта статья , которую рекомендовали многие люди, но она теряет меня, когда переходит от 1D к 2D; что я заметил, так это то, что лучше переключиться со значения по умолчанию (turbulence) кfractalNoiseи что чем меньшеbaseFrequencyзначение, тем мельче зернистость шума (также не используйте для этого целые числа — используйте7.01, но нет7)
второй примитив фильтра полностью обесцвечивает свой вход (эквивалентно эффектуgrayscale(1)илиsaturate(0)); поскольку мы не указали входные данные явно, по умолчанию используется результат предыдущего примитива фильтра — шумовой слой; для этого он переключается со значения по умолчаниюtypeдляfeColorMatrix(которыйmatrix) кsaturateи наборыvaluesк0(если у вас есть хороший мысленный образ модели HSL / биконуса , вы будете знать, что насыщение0%означает, что у нас всегда есть серый цвет; насколько светло или насколько темно, это зависит от яркости, буква «L» в «HSL»)
третий и последний примитив фильтра смешивает ненасыщенный шум с элементом, к которому применяется фильтр;feBlendпринимает два входных параметра, один из которых имеет значение «SourceGraphic» (обратите внимание, что заглавные буквы имеют значение!), а другой по умолчанию использует результат предыдущего фильтрующего примитива; наконец,modeмы используем этоmultiply(это умножает значения % RGB двух слоев, пиксель за пикселем)

Это все, что нужно для фильтра. Там нет ничего, что вам не нужно.

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

15

Источник

user1397351 09 янв '23 в 08:23

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

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

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

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

9

Источник

user574904 04 июн '12 в 23:09

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

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

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

8

Источник

user600769 15 фев '11 в 19:24

Основываясь на ответе Клинта Пахла, я использовал CSS mix-blend-mode чтобы получить более зернистый эффект и выборочно увеличить цвета, составляющие градиент.

См. Https://jsfiddle.net/jimmmy/2ytzh30w/ для примера кода.

7

Источник

user5633238 12 авг '21 в 17:09

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

2

Источник

user106224 25 окт '10 в 00:10

Я нашел способ без изображения с radial-gradient и только один div.

Во-первых, я хочу показать пример с радиальным градиентом. Допустим, мы хотим создать круг в нужных нам координатах. Первый кругx=120 y=80, второй кружок x=20 y=20. Чтобы лучше понять функцию, которую мы напишем ниже, мы можем рассмотреть этот пример.

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

Мы собираемся написать функцию @mixin для градиентов из тысяч строк.

Функция 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;
}

Применение:

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

Результат

Если мы хотим создавать шумы в соответствии со значением%?

Мы можем использовать для этого эту функцию.

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

Результат

0

Источник

user10698741 28 июл '19 в 15:55

Другие вопросы по тегам css css3 gradient gradients

user123429 25 окт '10 в 00:16 2010-10-25 00:16 · Accepted Answer · 2010-10-25 00:16

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

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