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

Question

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

Обновлено для комментариев: Если вы открываете свое окно с помощью window.open() , то на своей дочерней странице вы можете установить функцию в дочернем элементе, чтобы она была просто ссылкой, указывающей на родительская функция, поэтому укажите это на дочерней странице:

var RunCallbackFunction = function() { }; //reference holder only

Затем в родительском (открывающем) установите эту функцию при загрузке этого дочернего окна, например:

//random function you want to call
function myFunc() { alert("I'm a function in the parent window"); }

//to actually open the window..
var win = window.open("window.html");
win.onload = function() { win.RunCallbackFunction = myFunc; };

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

45

css css3 gradient

задан Paul D. Waite 26 October 2010 в 16:37

1 ответ

Другие вопросы по тегам:

css css3 gradient

Похожие вопросы:

score 0 · Answer 1

Я нашел путь без любого изображения с 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);
}

Результат