Cara Mudah Membuat Alat Gradasi Warna Yang Menarik Di Blog
Penerbit: Seo Techman

Cara Mudah Membuat Alat Gradasi Warna Yang Menarik Di Blog


Cara Mudah Membuat Alat Gradasi Warna Yang Menarik Di Blog
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 Alat Gradasi Warna Di Blog


Oke, tanpa berlama-lama kita langsung saja.

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

Mungkin itu saja yang dapat kami bagikan di kesempatan ini. Apabila ada kesalahan dalam penulisan, mohon maaf.

Load comments

0 Response to "Cara Mudah Membuat Alat Gradasi Warna Yang Menarik Di Blog"

Post a Comment