ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Генератор случайных градиентов онлайн

Генератор случайных градиентов онлайн

Теперь по одному клику можете автоматически генерировать случайные градиенты, так как в здесь представлен генератор с помощью CSS и JavaScript. Вы можете с помощью JavaScript генератора создавать случайные градиенты. А точнее вы переходите на страницу с генератором, где изначально и по умолчанию генерируется 2 оттенка цвета. Чтоб самому не искать и не выставлять, так как на все это уходит время, где делаем пару кликов, что находим нужную гамму, которая соответствует дизайну.

По одному клику вы перебираете цветовую гамму, она получается Random, что иногда высвечивается оригинальная палитра цвета, которая по сути не может друг другом соответствовать, а получается реально уникальная вещь в плане оттенка цвета. Вообще как поняли, что каждый раз, когда вы нажмете кнопку «Создать градиент» в этой программе, каждый раз будет появляться новый градиент.

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

Генератор онлайн случайных градиентов на JavaScript

Онлайн генераторы и библиотеки градиентов CSS3

Первым делом подключаем библиотеку со стилистикой:

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

Код

HTML

Здесь представлено 3 файла для этой программы, которые идут прямыми ссылками, а также находятся в архиве. Один для HTML, второй для CSS и третий для JavaScript.

Код

<div class="row">
  <div class="col-3"></div>
  <div class="col-6">
  <canvas id="adevenue"></canvas>
  </div>
</div>
<div class="row">
  <div class="col-12 text-center"> <button id="kahacknusecod" >Новый Градиент</button>
  </div>
</div>
<div class="row">
  <div class="col-12 text-center inarrow">
  <span id="kengaecunA">#0a0ae6</span> > <span id="kengaecunB">#15b4d8</span><br>
  </div>
</div>

CSS

Код

#adevenue {
  width:100%;
  background-image:
  linear-gradient(
  to right,
  blue, #2bd
  );
}
#kengaecunA, #kengaecunB, .inarrow {
  font-size: 30pt;
}

a {
  text-decoration: none;
  font-weight: 800;
  color: aqua;
}

Код

$("#kahacknusecod").on("click",function(){
  var a = randomColor();
  var b = randomColor();
  var c = randomColor();
  $("#adevenue").css("background-image"," linear-gradient(to right,"+ a +", " + b +")")
  $("#kengaecunA").html(a).css("color",a);
  $("#kengaecunB").html(b).css("color",b);
  $("#kahacknusecod").css("background-color",c);

});

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

Сам генератор случайных градиентов javascript, используя две библиотеки JS. Первый, это jQuery, вторая библиотека на javascript для создания случайных цветов.

Если вы новичок, то это будет лучшая практика JavaScript для вас. Если вы сейчас думаете о том, как выглядит эта программа, то переходим на demo страницу для предварительного просмотра.

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

06 Июля 2019 Загрузок: 1 Просмотров: 1458 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0