Thursday, April 30, 2015

Membuat Palette Kode Warna Flat UI

kode warna flat ui
Bagi para blogger tentunya sudah tidak asing lagi dengan kode warna HTML, karena sebagian besar pembentuk design blogger adalah kode warna. Ini pula yang menjadi ciri khas tampilan dari web atau blog sesuai pemiliknya. Untuk melihat kode warna ini kita bisa menggunakan inspect element html maupun source code pada browser yang kita gunakan. 

Seiring berkembangnya wedesign saat ini kini telah hadir Flat UI Color yang menawarkan kontras tampilan warna yang lebih berani dan elegan. Dan untuk update artikel kali ini saya akan berbagi cara membuat kode warna flat ui agar lebih mudah kita gunakan saat edit template blogger maupun kostumisasi widget blogger.

Untuk lebih jelasnya bisa lihat pada menu blog ini atau demo dibawah ini :

DEMO

Langkah langkah pembuatan button kode warna Flat UI :

1. Membuat Susunan CSS Button

.button_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: center;
  align-content: center;
margin-bottom:20px;
}
.button {
  text-transform: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 2.4em;
  flex: 100 100 8%;
  -webkit-flex: 100 100 8%;
}
Untuk menambahkan button warna yang lain silakan kunjungi Flat UI Color Picker yang lebih lengkap, kemudian copy kode dan nama warna masing masing dan buatlah struktur CSS seperti dibawah ini :

.button_turquoise {
  border: 5px solid #1abc9c;
  background: #1abc9c;
  color: #fff;
  padding: 1px;
}

dan seterusnya ....dan seterusnya
Kemudian tambahkan lagi CSS seperti ini:

.hasil-kode {border:1px solid #777;
  padding-top: 15px;
  font-size:24px;
  color: #999;
  width: 100%;
  background: #ececec;
}

@media (max-width: 800px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 4px;
  }
  .hasil-kode {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }

@media (max-width: 320px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }
  .hasil-kode {
    width: 100%;
  }
}
2. Membuat Struktur HTML


<center class="button_wrap">
<a class="button button_turquoise" onClick="colorToTurquoise()">Turquoise</a> dan seterusnya...dan seterusnya  sesuai elemen button warna yang di buat pada CSS diatas
<div class="virlyz-header">
FLAT UI COLOR</div>
<div class="hasil-kode" id="hasil-kode">
<div class="colorName" id="colorName">
Silakan klik button warna diatas,</div>
<div class="colorText" id="colorText">
Kemudian copy kode warna yang dihasilkan sesuai yang anda pilih..!!!</div>
</div>
</center>
3. Kemudian Membuat Javascript sesuai kode warna yang akan ditampilkan saat button di klik


<script type='text/javascript'>
function colorToTurquoise() {
 document.getElementById("hasil-kode").style.backgroundColor = "#1abc9c";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Turquoise";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#1abc9c";
}

Dan seterusnya ...dan seterusnya sesuai element yang di buat pada css diatas
</script>
Text berwarna biru adalah element untuk kode warna yang dibuat, jadi sesuaikan kode dan nama warnanya