Membuat Alat Kode Warna Yang Responsive

Kode warna sebuah tool yang bisa di manfaatkan untuk memilih warna yang dapat dipergunakan untuk modifikasi widget atau modifikasi template blog

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.


Semoga bermanfaat.

2 comments:

  1. Dropcapnya menggunakan Font apa and text shadownya gimana bang, saya sangan simpatik dengan dropcap serta panduan yang ada di blog ini

    ReplyDelete
    Replies
    1. Saya menggunakan font google:

      font:bold 750% 'Bad Script', cursive;
      text-shadow:-2px -4px 0px #eee,-3px -5px 0px #999;

      Delete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin