»
Selasa, 06 Januari 2015

Memasang Hex Color Schemer Dengan CSS

Unknown
CSS
Selasa, 06 Januari 2015
1 Komentar

Memasang Hex Color Schemer Dengan CSS

Salam Blogging buat sahabat semua. semoga baik selalu dan sukses selalu pada pertemuan ini saya akan bagikan cara membuat atau, Memasang Hex Color Schemer Dengan CSS. Dimana dalam mendesain blog atau web situs hack warna sangat di perlukan. karena pastinya kita tidak akan hapal semua dengan warna dan perpaduan lainya yang sesuai dengan keinginan yang mana kita inginkan. Nah dengan tutorial ini saya akn memudahkan anda dalam mengatur warna pada situs/blog anda agar lebih mudah dalam memadu warna, yang kita inginkan menurut keinginan kita. Simak cara pemasanganya berikut di bawah ini :

CSS

Cara Pemasangan Hex Color Schemer Dengan CSS :

Baiklah sobat blogging semua tanpa basa-basi atau muter muter kita langsung saja pada tppik. Jika anda ingin memasang "Hex Color Flat UI Schemer" pada blog anda. Masukan semua kode di bawah ini pada Halaman statis blog anda. Atau pada postingan baru.

Keterangan :

Cara anya buka dashboar blog anda dan sign in pilih Laman dan buat laman baru, Berikan Nama judul Laman lebih dulu agar link laman sesuai dengan judul laman yang anda buat. Setelah anda memasukan kode di bawah ini publikasikan laman baru anda. Selain pada post Laman trik ini juga bisa di terapkan pada artikel baru atau new post artikel anda. Caranya nyaris sama seperti contoh pada pemasangan pada laman blog anda. Gimana sob sudah pahamkan.? Berikut di bawah ini susunan kode nya copy semua dengan cara klik ganda pada kolom tag Syntax copy dan pastekan pada laman baru atau pada artikel baru blog anda.

<style>

.post img{border: 0;filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
    );}
.post img:hover{border: 0;padding: 0;
margin: 0;}

table, td, th, tr{
border:none !important;
}
#tengah {float:left}
#Wheel{
  position: relative;
  height: 370px;
  width: 424px;
  top: 7px;
  left:0;
  text-align: center;
  border-right: 1px solid #CCCCCC;
}

#palette{
  position: relative;
  top: 15px;
  left: 5px;
float:left;
}
#kiri {float:left;}
#ColorInput{
  position: relative;
  height: auto;
  width: 140px;
  font: 13px verdana,arial,helvetica;
  color: #444444;
  font-weight: bold;
  text-align: center;
  background-color: #F4F4F2;
  
}

#forumsBox{
  position: absolute;
  width: 166px;
  left: 610px;
  top: 386px; /* 401 */
  font: 11px arial,helvetica;
  color: #444444;
  /*background-color: #F4F4F2;
  border: 1px #AAAAAF solid;*/
}

#listBox{
  position: absolute;
  width: 166px;
  left: 610px;
  top: 80px; /* 80 */
  font: 11px verdana,arial,helvetica;
  color: #444444;
  background-color: #F4F4F2;
  border: 1px #AAAAAF solid;
}

.rightText{
  color: #666666;
  font: 11px tahoma,arial,helvetica;
  padding: 2px;
}

.rightText a {
  font-weight: normal;
  line-height: 15px;
  text-decoration: none;
}

.rightText a:hover {
  text-decoration: underline;
}

.navBox{
  width: auto;
  height: auto;
  padding-top: 8px;
  border-right: 1px #E6E6E6 solid;
  border-bottom: 1px #E6E6E6 solid;
  background-color: #FCFCFA;
}

#currentColor{
 border: 1px solid;
 height: 90px;
 width: auto;
  cursor: pointer;cursor: hand;
  background-color:#FFFFFF;
}

.headSmall{
  color: #666666;
  font: 11px tahoma,arial,helvetica;
  margin-top: 2px;
}

.sideHead{
  width: auto;
  color: #777777;
  font: 11px/25px tahoma,arial,helvetica;
  font-weight: bold;
  text-align: center;
  border-top: 1px #FFFFFF solid;
  border-bottom: 1px #AAAAAF solid;

  background-color: #E8E8E6;
}

.rgbBox{
 width: 30px;
  color: #444444;
  font: 13px tahoma,arial,helvetica;
  text-align: center;
}

.hexBox{
 width: 54px;
  color: #444444;
  font: 13px tahoma,arial,helvetica;
  text-align: center;
}

.button{
  color: #333333;
  /*background-color: #E4E4DF;
  border: 1px;*/
  font: 11px tahoma,arial,helvetica;
  height: 23px;
  width: 90px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.currentBorder{
 border: 1px solid;
  height: auto;
 width: auto;
  border-left-color: #9D9DA1;
 border-top-color: #9D9DA1;
 border-right-color: #FFFFFF;
 border-bottom-color: #FFFFFF;
  margin: 10px;
}

#swatch0{
 position: absolute;
 left: 0px;
  top: 0px;
}

#swatch1{
 position: absolute;
 left: 100px;
  top: 0px;
}

#swatch2{
 position: absolute;
 left: 200px;
  top: 0px;
}

#swatch3{
 position: absolute;
 left: 300px;
  top: 0px;
}

#swatch4{
 position: absolute;
 left: 300px;
  top: 90px;
}

#swatch5{
 position: absolute;
 left: 300px;
  top: 180px;
}

#swatch6{
 position: absolute;
 left: 300px;
  top: 270px;
}

#swatch7{
 position: absolute;
 left: 200px;
  top: 270px;
}

#swatch8{
 position: absolute;
 left: 100px;
  top: 270px;
}

#swatch9{
 position: absolute;
 left: 0px;
  top: 270px;
}

#swatch10{
 position: absolute;
 left: 0px;
  top: 180px;
}

#swatch11{
 position: absolute;
 left: 0px;
  top: 90px;
}

#swatchm1{
 position: absolute;
 left: 100px;
  top: 90px;
}

#swatchm2{
 position: absolute;
 left: 200px;
  top: 90px;
}

#swatchm3{
 position: absolute;
 left: 200px;
  top: 180px;
}

#swatchm4{
 position: absolute;
 left: 100px;
  top: 180px;
}

.swatch{
 padding: 10px;
 width: 90px;
 text-align: center;
}

.color{
 border: 1px solid;
 height: 54px;
 width: 70px;
  cursor: pointer;cursor: hand;
  background-color:#FFFFFF;
}

.border{
 border: 1px solid;
  height: 56px;
 width: 72px;
  margin-left: auto;
  margin-right: auto;
  border-left-color: #9D9DA1;
 border-top-color: #9D9DA1;
 border-right-color: #FFFFFF;
 border-bottom-color: #FFFFFF;
}

.rgb{
 font: 11px tahoma,arial,helvetica;
}

.hex{
 font: 11px tahoma,arial,helvetica;
}

img.screen {
  display: block;
  margin: 0 auto;
  border: 0;
  /*margin: 4px 0 12px 19px;*/
}

a.cm {
  display: block;
  background-color: #FBFDFE;
  padding: 11px 6px 10px 6px;
  border-bottom: 1px solid #D4E7ED;
  font: 11px/17px arial, sans-serif;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
}
a.cm:hover {
  background-color: #FFF;
}
</style>
<script language="JavaScript" type="text/javascript">
var HSL = new Object();
var RGB = new Object();
var tempRGB = new Object();
RGB.R = RGB.G = RGB.B = 0;
tempRGB.R = tempRGB.G = tempRGB.B = 0;
HSL.H = HSL.S = HSL.L = 0;
var HEXCodes = new Array(256);
var k = 0;
var HEX = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
for (i = 0; i < 16; i++) 
{ 
 for (j = 0; j < 16; j++) 
 {  
  HEXCodes[k] = HEX[i] + HEX[j];
  k++;
 }
}

function SetHex(bgColor)
{
  var i=0;
  
  if(bgColor.substring(0,3)=="rgb") {
    bgColor = bgColor.substring(4,bgColor.length-1);
    rgbArray = bgColor.split(", ");
    ChangeColors(rgbArray[0],rgbArray[1],rgbArray[2]);
    return;
  }
  
  if(bgColor.length==0) return;
  if(bgColor.length==7) bgColor=bgColor.substring(1,7);

  if(bgColor.length<6){
    alert("You must enter a 6 character HEX value!");
    return;
  }

  bgColor=bgColor.toUpperCase();
  for (j = 0; j < 6; j++) {
    if (!isHex(bgColor.charAt(j))){
      alert("You may only enter values between A-F and 0-9!");
      return false;
    }
  }
  
  while(HEXCodes[i] != bgColor.substring(0,2).toUpperCase()) i++;
  RGB.R=i;
  i=0;
  while(HEXCodes[i] != bgColor.substring(2,4).toUpperCase()) i++;
  RGB.G=i;
  i=0;
  while(HEXCodes[i] != bgColor.substring(4,6).toUpperCase()) i++;
  RGB.B=i;
  
  ChangeColors(RGB.R,RGB.G,RGB.B);
}

function isHex(hexChar) {
  for (k = 0; k < HEX.length; k++) {
  if (hexChar == HEX[k]) {
    return true;
    }
  }
return false;
}

function ChangeColors(r,g,b)
{
 if (r>255) r=255;
 if (g>255) g=255;
 if (b>255) b=255;
 if (r<0) r=0;
 if (g<0) g=0;
 if (b<0) b=0;
  if(!(r>=0)&&!(r<=255)) r=0
  if(!(g>=0)&&!(g<=255)) g=0
  if(!(b>=0)&&!(b<=255)) b=0
  RGB.R=r;
  RGB.G=g;
  RGB.B=b;
 document.getElementById('codes').r.value=r;
 document.getElementById('codes').g.value=g;
 document.getElementById('codes').b.value=b;
 document.getElementById('codes').hex.value=HEXCodes[r]+HEXCodes[g]+HEXCodes[b];
 document.getElementById('currentColor').style.backgroundColor="#"+HEXCodes[r]+HEXCodes[g]+HEXCodes[b];

 DrawWheel();
}

function DrawWheel()
{
 var red,green,blue,direction;
  
  RGBtoHSL(RGB.R,RGB.G,RGB.B);
  for (i = 0; i < 12; i++) 
 {
  HSLtoRGB(HSL.H,HSL.S,HSL.L);
  red=HEXCodes[tempRGB.R];
  green=HEXCodes[tempRGB.G];
  blue=HEXCodes[tempRGB.B];
  document.getElementById(i).style.backgroundColor="#" + red + green + blue;
  document.getElementById(i+'HEX').innerHTML="#" + red + green + blue;
  document.getElementById(i+'RGB').innerHTML=tempRGB.R+"."+tempRGB.G+"."+tempRGB.B;
  HSL.H+=30;
  if (HSL.H>=360)
   HSL.H-=360;
 }
  
  RGBtoHSL(RGB.R,RGB.G,RGB.B);
  for (i = 1; i <= 4; i++) 
 {
  if(i==3){
      RGBtoHSL(RGB.R,RGB.G,RGB.B);
      HSL.H+=180;
      if (HSL.H>=360) HSL.H-=360;
    }
    if(i==1){
      if(HSL.L<60)
        direction=1;
      else
        direction=-1;    
    }
    HSL.L+=direction*12;
    HSLtoRGB(HSL.H,HSL.S,HSL.L);
  red=HEXCodes[tempRGB.R];
  green=HEXCodes[tempRGB.G];
  blue=HEXCodes[tempRGB.B];
  document.getElementById('m'+i).style.backgroundColor="#" + red + green + blue;
  document.getElementById('m'+i+'HEX').innerHTML="#" + red + green + blue;
  document.getElementById('m'+i+'RGB').innerHTML=tempRGB.R+"."+tempRGB.G+"."+tempRGB.B;
 }
}

function LightenScheme()
{
  RGBtoHSL(RGB.R,RGB.G,RGB.B);
  HSL.L=HSL.L+5;
  if(HSL.L>100) HSL.L=100;
 HSLtoRGB(HSL.H,HSL.S,HSL.L);
  ChangeColors(tempRGB.R,tempRGB.G,tempRGB.B);
}

function DarkenScheme()
{
  RGBtoHSL(RGB.R,RGB.G,RGB.B);
  HSL.L=HSL.L-5;
  if(HSL.L<0) HSL.L=0;
 HSLtoRGB(HSL.H,HSL.S,HSL.L);
  ChangeColors(tempRGB.R,tempRGB.G,tempRGB.B);
}

function HSLtoRGB(H,S,L) 
{
 var p1,p2;
  
 L/=100;
 S/=100;
 if (L<=0.5) p2=L*(1+S);
 else p2=L+S-(L*S);
 p1=2*L-p2;
 if (S==0) 
 {
  tempRGB.R=L; 
  tempRGB.G=L;
  tempRGB.B=L;
 } 
 else 
 {
  tempRGB.R=FindRGB(p1,p2,H+120);
  tempRGB.G=FindRGB(p1,p2,H);
  tempRGB.B=FindRGB(p1,p2,H-120);
 }
 tempRGB.R *= 255;
 tempRGB.G *= 255;
 tempRGB.B *= 255;
 tempRGB.R=Math.round(tempRGB.R);
 tempRGB.G=Math.round(tempRGB.G);
 tempRGB.B=Math.round(tempRGB.B);
}

function FindRGB(q1,q2,hue) 
{
 if (hue>360) hue=hue-360;
 if (hue<0) hue=hue+360;
 if (hue<60) return (q1+(q2-q1)*hue/60);
 else if (hue<180) return(q2);
 else if (hue<240) return(q1+(q2-q1)*(240-hue)/60);
 else return(q1);
}

function RGBtoHSL(r,g,b)
{
 var Min=0;
 var Max=0;
 r=(eval(r)/51)*.2;
 g=(eval(g)/51)*.2;
 b=(eval(b)/51)*.2;

 if (eval(r)>=eval(g))
  Max=eval(r);
 else
  Max=eval(g);
 if (eval(b)>eval(Max))
  Max=eval(b);
 
 if (eval(r)<=eval(g))
  Min=eval(r);
 else
  Min=eval(g);
 if (eval(b)<eval(Min))
  Min=eval(b);

 HSL.L=(eval(Max)+eval(Min))/2;
 if (eval(Max)==eval(Min)) 
 {
  HSL.S=0;
  HSL.H=0;
 } 
 else 
 {
  if (HSL.L < .5)
   HSL.S=(eval(Max)-eval(Min))/(eval(Max)+eval(Min));
  if (HSL.L >= .5)
   HSL.S=(eval(Max)-eval(Min))/(2-eval(Max)-eval(Min));
  if (r==Max)
   HSL.H = (eval(g)-eval(b))/(eval(Max)-eval(Min));
  if (g==Max)
   HSL.H = 2+((eval(b)-eval(r))/(eval(Max)-eval(Min)));
  if (b==Max)
   HSL.H = 4+((eval(r)-eval(g))/(eval(Max)-eval(Min)));
 }
 HSL.H=Math.round(HSL.H*60);
 if(HSL.H<0) HSL.H += 360;
 if(HSL.H>=360) HSL.H -= 360;
 HSL.S=Math.round(HSL.S*100);
 HSL.L=Math.round(HSL.L*100);
}

function DrawPalette()
{
  var outer, middle, inner=255;
  
  document.write('<div ID="palette">');
  document.write('<table cellpadding=0 cellspacing=1 border=0 bgcolor="#000000">');
  document.write('<tr>');
    
  for (outer = 255; outer >= 0; outer-=51)
  {
    for (middle = 255; middle >= 0; middle-=51)
    {
      for (inner = 255; inner >= 0; inner-=51)
      {
        tR=HEXCodes[255 - outer];
      tG=HEXCodes[255 - middle];
      tB=HEXCodes[255 - inner];
  
        document.write('<td height="11" width="11" bgcolor="#'+tR+tG+tB+'"><a href="#" onClick="ChangeColors('+(255 - outer)+','+(255 - middle)+','+(255 - inner)+'); return false;"><img src="http://upload.wikimedia.org/wikipedia/en/d/d0/Clear.gif" border="0" width="11" height="11" /></a></td>');
      }
    }
    if(outer!=0) document.write('</tr><tr>');
  }
  document.write('</tr>');
  document.write('</table>');
  document.write('</div>');
}
</script>
</head>

<body bgcolor="#FCFCF9" text="#000000" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" rightmargin="0" onLoad="ChangeColors(51,102,255);">

<div id='kiri'>
<div ID="ColorInput">
  <div class="sideHead">Current Color</div>
  <div class="currentBorder"><div ID="currentColor">&nbsp;</div></div>
  <form name="codes" id="codes">
  <div class="currentBorder">
  <div class="navBox">
  <table align="center" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>R:</td>

    <td><input type="text" name="r" value="0" maxlength="3" class="rgbBox"></td>
  </tr>
  <tr>
    <td>G:</td>
    <td><input type="text" name="g" value="0" maxlength="3" class="rgbBox"></td>
  </tr>
  <tr>
    <td>B:</td>

    <td><input type="text" name="b" value="0" maxlength="3" class="rgbBox"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" class="button" value="Set RGB" onClick="ChangeColors(document.getElementById('codes').r.value,document.getElementById('codes').g.value,document.getElementById('codes').b.value);"></td>
  </tr>
  <tr>
    <td colspan="2">#<input type="text" class="hexBox" name="hex" value="000000" maxlength="6"></td>
  </tr>

  <tr>
    <td colspan="2"><input type="button" class="button" value="Set HEX" onClick="SetHex(document.getElementById('codes').hex.value);"></td>
  </tr>
<tr>
<td colspan="2">
<input type="button" class="button" value="Lighten Scheme" onClick="LightenScheme();" style="margin-bottom: 0px;"/>
<input type="button" class="button" value="Darken Scheme" onClick="DarkenScheme();"/>
</td>
</tr>
  </table>
  
  </div></div>
  </form>
</div>
</div>

<div id ='tengah'>
<div ID="Wheel" align="center">
  <div ID="swatch0" class="swatch">
    <div class="border"><div ID="0" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="0RGB" class="rgb">255.255.255</div>
    <div ID="0HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch1" class="swatch">
    <div class="border"><div ID="1" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>

    <div ID="1RGB" class="rgb">255.255.255</div>
    <div ID="1HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch2" class="swatch">
    <div class="border"><div ID="2" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="2RGB" class="rgb">255.255.255</div>
    <div ID="2HEX" class="hex">#FFFFFF</div>

  </div>
  <div ID="swatch3" class="swatch">
    <div class="border"><div ID="3" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="3RGB" class="rgb">255.255.255</div>
    <div ID="3HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch4" class="swatch">
    <div class="border"><div ID="4" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>

    <div ID="4RGB" class="rgb">255.255.255</div>
    <div ID="4HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch5" class="swatch">
    <div class="border"><div ID="5" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="5RGB" class="rgb">255.255.255</div>
    <div ID="5HEX" class="hex">#FFFFFF</div>

  </div>
  <div ID="swatch6" class="swatch">
    <div class="border"><div ID="6" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="6RGB" class="rgb">255.255.255</div>
    <div ID="6HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch7" class="swatch">
    <div class="border"><div ID="7" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>

    <div ID="7RGB" class="rgb">255.255.255</div>
    <div ID="7HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch8" class="swatch">
    <div class="border"><div ID="8" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="8RGB" class="rgb">255.255.255</div>
    <div ID="8HEX" class="hex">#FFFFFF</div>

  </div>
  <div ID="swatch9" class="swatch">
    <div class="border"><div ID="9" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="9RGB" class="rgb">255.255.255</div>
    <div ID="9HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch10" class="swatch">
    <div class="border"><div ID="10" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>

    <div ID="10RGB" class="rgb">255.255.255</div>
    <div ID="10HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatch11" class="swatch">
    <div class="border"><div ID="11" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="11RGB" class="rgb">255.255.255</div>
    <div ID="11HEX" class="hex">#FFFFFF</div>

  </div>

  <div ID="swatchm1" class="swatch">
    <div class="border"><div ID="m1" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="m1RGB" class="rgb">255.255.255</div>
    <div ID="m1HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatchm2" class="swatch">

    <div class="border"><div ID="m2" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="m2RGB" class="rgb">255.255.255</div>
    <div ID="m2HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatchm3" class="swatch">
    <div class="border"><div ID="m3" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="m3RGB" class="rgb">255.255.255</div>

    <div ID="m3HEX" class="hex">#FFFFFF</div>
  </div>
  <div ID="swatchm4" class="swatch">
    <div class="border"><div ID="m4" class="color" onClick="SetHex(this.style.backgroundColor);">&nbsp;</div></div>
    <div ID="m4RGB" class="rgb">255.255.255</div>
    <div ID="m4HEX" class="hex">#FFFFFF</div>
  </div>
</div>
</div>
<script language="JavaScript">DrawPalette();</script>

Setelah semuanya terpasang sesuai tutorial diatas selanjutnya klik Publikasikan Laman atau Artikel baru anda. Selamat mencoba semoga anda berhasil Memasang Hex Color Schemer Dengan CSS pada blog anda dengan sukses. Sampai disini artikel saya kali ini semoga bermanfaat. Salam blogging.
Lokasi: Indonesia

1 komentar:

avatar
Balas
Unknown delete 13 Januari 2015 pukul 15.33

di coba tutorialnya sob

1 Komentar



Baca Konversi Kode OOT Smiley

Langganan: Posting Komentar (Atom)
 
Selamat datang di Roni Blogs, Blog ini saya bangun untuk melengkapi kecintaan saya pada blog, Dan juga dalam kecintaan Mendesain Template Blog. Selengkapnyan baca halaman saya : Karrysta Salam blogging Buat Anda Semua.