Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

background-color:#0094d0;

Демо: JSFiddle

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

Ответ 3

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

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

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

Ответ 4

Для новизны, вот некоторые чистые шумы 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>

Ответ 5

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

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

Параметры SVG

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

  2. Атрибут фильтра type может быть fractalNoise или turbulence, который определяет функцию фильтра. Оба обеспечивают различный визуальный эффект, но, на мой взгляд, шумовой фильтр немного более тонкий.

  3. Атрибут filter baseFrequency может варьироваться от 0,5 до 0,9, чтобы обеспечить курс и точную текстуру соответственно. По моему мнению, этот диапазон визуально оптимален для любого фильтра.

  4. Первый прямоangularьник fill можно изменить, чтобы обеспечить другой базовый цвет. Позже, однако, мы по существу объединяем этот цвет с полупрозрачным градиентом CSS, который также определяет цвет (ы). Так что белый цвет - хорошая отправная точка здесь.

  5. Второй прямоangularьник 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

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

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

  3. Непрозрачность параметров градиента - т.е. rgba() и hsla() - могут быть увеличены для усиления определенного цвета и снижения уровня шума. Опять же, 0,2 - 0,9 - идеальный диапазон.

Заключение

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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

Ответ 9

Я нашел способ без какого-либо изображения с 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>