Membuat Text Box Keren Dengan Warna

Membuat Text Box Keren Dengan Warna - Jika saat Anda share berupa tutorial yang berhubungan dengan perkodean misalnya: CSS, HTML, JavaScript, jQuery, XML dan PHP, alangkah baiknya tempatkan kode-kode tersebut dalam sebuah text box. Terlebih box tersebut Anda modifikasi dengan tampilan yang keren, sehingga pengunjung setia Anda akan dengan senang untuk mempelajari kode-kode yang anda berikan.

Kode terkait di -

Belajar CSS Dasar Box Shadow

Text Box berikut saya modifikasi dengan kode line-gradient (warna latar belakang text box dengan garis zebra) dan menambahkan value deklarasi kode box shadow yang dapat Anda pelajari pada link diatas, dan setiap text box saya pisahkan dengan warna yang berbeda-beda disetiap kode yang anda tuliskan, sehingga tampilannya menjadi lebih keren seperti tombol DEMO SHOW dibawah ini

DEMO SHOW

TAMPILAN PADA POSTINGAN (HTML MODE)

<pre data-codetype="HTML">..TEXT ANDA..</pre>
<pre data-codetype="CSS">..TEXT ANDA..</pre>
<pre data-codetype="JavaScript">..TEXT ANDA..</pre>
<pre data-codetype="jQuery">..TEXT ANDA..</pre>

PENERAPAN CODE CSS

pre {
  background-color:white;
  background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
  -webkit-background-size:30px 30px;
  -moz-background-size:30px 30px;
  -ms-background-size:30px 30px;
  -o-background-size:30px 30px;
  background-size:30px 30px;
  background-repeat:repeat;
  font:normal bold 12px/15px Courier,monospace;
  color:#333;
  border:2px solid #666;
  position:relative;
  padding:0 7px;
  margin:10px 0;
  height:250px;
  word-wrap:normal;
  white-space:pre;
  position:relative;
}

pre[data-codetype] {
  padding:45px 1em 7px 1em;
}

pre[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  position:absolute;
  background-color:#666;
  top:0;
  right:0;
  left:0;
  border-bottom:2px solid #999;
  padding:5px 5px 5px 7px;
  font:bold 14px/20px Arial,Sans-Serif;
  color:white;
}

pre[data-codetype="HTML"] {
  border-color:#0B7E88;
  color:#08464B;
  -webkit-box-shadow:5px 5px 5px rgb(7,55,99);
  -moz-box-shadow:5px 5px 5px rgb(7,55,99);
  box-shadow:5px 5px 5px rgb(7,55,99);}

pre[data-codetype="CSS"] {
  border-color:#080;
  color:#4B5D08;
  -webkit-box-shadow:5px 5px 5px rgb(56,118,29);
  -moz-box-shadow:5px 5px 5px rgb(56,118,29);
  box-shadow:5px 5px 5px rgb(56,118,29);}

pre[data-codetype="JavaScript"] {
  border-color:#545448;
  color:#1F2E24;
  -webkit-box-shadow:5px 5px 5px rgb(102,102,102);
  -moz-box-shadow:5px 5px 5px rgb(102,102,102);
  box-shadow:5px 5px 5px rgb(102,102,102);}

pre[data-codetype="JQuery"] {
  border-color:#395540;
  color:#2E2E27;
  -webkit-box-shadow:8px 5px 8px rgb(12,52,61);
  -moz-box-shadow:5px 5px 5px rgb(12,52,61);
  box-shadow:5px 5px 5px rgb(12,52,61);}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}