Cara Membuat Tools Background Gradasi Warna di Blog

Seotechman.com - Apa yang dimaksud dengan gradasi warna?

Secara pengertian umumnya gradasi yang berarti susunan derajat atau peringkat, peralihan suatu keadaan menuju keadaan lain, atau proses perubahan dari satu posisi ke posisi lain. Nah, pada warna, gradasi merupakan perubahan dari satu warna ke warna lainnya (penggabungan 2 warna atau bisa lebih).

Misalnya warna biru dicampur dengan warna biru muda atau cyan. Maka warna tengahnya, bisa ditampilkan lebih dari satu, tergantung komposisi pencampurannya. Warna antara atau transisinya dibuat menjadi tujuh. Maka ketujuh warna transisi ini akan berubah dari warna biru menuju biru muda secara bertahap. Nah derajat perubahan warna itulah yang disebut dengan gradasi.

Pengertian diatas sama hal nya dengan tutorial yang akan kami bahas hari ini.

Cara Membuat Tools Background Gradasi Warna di Blog

Oke, tanpa berlama-lama kita langsung saja.

Cara Membuat Tools Background Gradasi di Blog

Seperti biasa sobat login ke blogger. Setelah itu masuk ke menu halaman dan buat halaman baru.

Jika sudah, silahkan sobat salin semua kode dibawah ini mulai dari Css, Html, Dan Javascript nya. Berikut ini kode-kodenya:

CSS

@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap");
:root {
  --stop1: #b3ffce;
  --grad-hint: 40%;
  --stop2: #9e5ac9;
}

.gradient-viz {
  display: block;
  width: 100%;
  height: 4rem;
  background: linear-gradient(to right, var(--stop1), var(--grad-hint), var(--stop2));
}

.gradient-hint {
  width: 100%;
}

code {
  display: block;
  border: 1px solid lightgray;
  background: #f3f3f3;
  padding: 1.5rem;
  font-family: 'IBM Plex Mono';
  font-size: 1.25rem;
}

.container {
  max-width: 600px;
  margin: 2rem auto;
  position: relative;
  padding: 0 1.7rem;
}

.color-select {
  appearance: none;
  position: absolute;
  top: 0;
  border: 1px solid;
  outline: none;
  width: 25px;
  height: 3.9rem;
  padding: 0;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

.stop1 {
  left: 0;
  background: var(--stop1);
}

.stop2 {
  right: 0;
  background: var(--stop2);
}

Javascript

document.querySelector('.gradient-hint').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--grad-hint', e.target.value + '%')
  updateCode()
})

document.querySelector('.stop1').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--stop1', e.target.value)
  updateCode()
})

document.querySelector('.stop2').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--stop2', e.target.value)
  updateCode()
})

updateCode = () => {
  const body = window.getComputedStyle(document.body)
  const codeBlock = document.querySelector('.gradient-output')
  codeBlock.innerText = `background: linear-gradient(to right, ${body.getPropertyValue('--stop1')}, ${body.getPropertyValue('--grad-hint')}, ${body.getPropertyValue('--stop2')})`
}

updateCode()

HTML

<div class="container">
  <div class="gradient-viz"></div>
  <input type="color" class="color-select stop1" value="#b3ffce"/>
  <input type="color" class="color-select stop2" value="#9e5ac9"/>
  <input type="range" value="40" min="0" max="100" class="gradient-hint">

  <code class="gradient-output"> 
  </code>
</div>

Jika sobat merasa bahwa semua kode diatas sudah benar-benar disalin. Langkah terakhir yaitu, dengan mengeceknya.

Live Demo

Demikianlah tutorial cara membuat tools background gradasi warna di blog. Silahkan dicoba dan di praktekan masing-masing.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini