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

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

45 голосов
/ 25 октября 2010

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

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

Ответы [ 7 ]

64 голосов
/ 21 декабря 2012

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

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

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

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

background-color:#0094d0;

Демонстрация: JSFiddle

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

22 голосов
/ 25 октября 2010

На данный момент в css нет способа добавить «шум» к фону.

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

12 голосов
/ 18 июля 2016

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

Создание текстур (шум) с использованием 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. Атрибут type фильтра может быть fractalNoise или turbulence, который определяет функцию фильтра.Оба обеспечивают различный визуальный эффект, но, на мой взгляд, шумовой фильтр немного более тонкий.

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

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

  5. Второй прямоугольник 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>, которые могут обеспечить дополнительные результаты.

8 голосов
/ 15 февраля 2011

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

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

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

7 голосов
/ 05 июня 2012

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

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

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

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

2 голосов
/ 25 октября 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...