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

Генератор цвета градиента на JavaScript

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

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

Так смотрится по умолчанию генератор для градиентов:

Javascript генератора градиентных цветов

Установка:

HTML

Код

<div class="sluchayn_otenok">

<div class="otobuvates" id="gradient"></div>
<div class="kodys_sveta"></div>

  <input type="color" class="vaskasa1" name="vaskasa1" value="#eb99f1">
  <input type="color" class="vaskasa2" name="vaskasa2" value="#6b4487">
  <select name="toDirection">
  <option value="to right">направо</option>
  <option value="to right bottom">справа внизу</option>
  <option value="to right top">вправо вверх</option>
  <option value="to left">налево</option>
  <option value="to left bottom">слева внизу</option>
  <option value="to left top">слева вверху</option>
  <option value="to bottom">вниз</option>
  <option value="to top">к началу</option>
  </select>

</div>

CSS

Код

.sluchayn_otenok {
  width: 416px;
  box-shadow: 0 0 20px rgb(41 88 126 / 40%);
  margin: 50px auto;
  padding: 18px;
  height: 412px;
}
.otobuvates {
  width: 416px;
  height: 214px;
  border: 2px solid #f3efef;
  box-shadow: 0 0 20px rgb(1 1 1 / 35%);
  background: linear-gradient(to right, #eb99f1, #6b4487);
}

.kodys_sveta{
  padding: 5px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-family: sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}
.vaskasa1,.vaskasa2{
  width: 70px;
  height: 40px;
  float: left;
  margin: 10px;
  margin-top: 20px;
}
select{
  float: right;
  margin-top: 25px;
  width: 130px;
  height: 35px;
}

Код

//Некоторым классам и функциям html необходимо определять константу
var css = document.querySelector(".kodys_sveta") // color code
var vaskasa1 = document.querySelector(".vaskasa1") // 1st color
var vaskasa2 = document.querySelector(".vaskasa2") // 2nd color
var bodys = document.getElementById("gradient") // color otobuvates
var linearDirection = document.getElementsByName("toDirection")[0] //Select box

//значения по умолчанию CSS RGBA для linear-gradient

function currentSettings() {
  var CSSprop = window.getComputedStyle(bodys,null).getPropertyValue("background-image")
  // console.log(CSSprop)
  css.textContent = CSSprop
}

currentSettings()
  //Вы должны принять меры, чтобы увидеть цветовой код

  function returnColor(){

  bodys.style.background =
  "linear-gradient("
  + linearDirection.value
  + ", "
  + vaskasa1.value
  + ","
  + vaskasa2.value
  + ")";

  currentSettings()

}

document.querySelector('select[name="toDirection"]').onchange=returnColor;
vaskasa1.addEventListener("input", returnColor)
vaskasa2.addEventListener("input", returnColor)

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

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

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

01 Декабря 2021 Загрузок: 1 Просмотров: 1207 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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