Membuat Alat Kode Warna Yang Responsive

Membuat Alat Kode Warna Yang Responsive - Tool atau alat yang biasa kita gunakan untuk mengedit/modifikasi template adalah sebuah tool kode warna, sebuah alat yang sangat dan banyak membantu kita dalam menentukan sebuah warna yang sesuai dengan yang kita inginkan, baik itu untuk modifikasi sebuah warna background ataupun untuk warna-warna lainnya.

Tidak menutup kemungkinan bagi kalian membutuhkan alat ini untuk modifikasi template kalian supaya dalam pencarian warna dapat mendapatkan warna yang sesuai dan cocok dengan keinginan.

Dalam hal ini kita akan membuat sebuah tool atau alat kode warna yang responsive dalam semua ukuran layar, supaya walaupun dalam penggunaan dalam ukuran layar kecil pun alat kode warna tersebut bisa ditampilkan dengan baik.

Untuk membuat tool kode warna tersebut responsive kita tambahkan Css sebagai perintah untuk membuat tool kode warna tersebut responsive.

Css Yang Dipergunakan

CSS

.kodewarna {
  text-align:center;
  margin:20px auto;
  width:40%;
}

.kodewarna2 {
  position:relative;
  padding-bottom:100%;
  height:0;
  overflow:hidden;
}

.kodewarna2 object {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

Html Yang Dipergunakan

HTML

<div class="kodewarna">
<div class="kodewarna2">
<object height="420" width="420" data="https://cdn.rawgit.com/deZige/swf/master/KodeWarna.swf"></object>
</div></div>
<div class="kodewarna">
<div class="kodewarna2">
<object height="420" width="420" data="https://cdn.rawgit.com/deZige/swf/master/KodeWarna2.swf"></object>
</div>
</div>

Tempatkan html tersebut ditempat yang kalian inginkan tool kode warna tersebut tampil.

• Demo

Semoga bermanfaat.