22.3.14
10
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.

Text box image


Kode terkait di -


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;}

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Text Box Keren Dengan Warna
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

10 komentar

  1. Balasan
    1. sedikit keren lah, tinggal dipoles aja kode-kodenya mas, biar semakin keren lagi,,hehe

      Hapus
  2. udah lama neh ga mampir ke blog mba devi,, mantap2 tutornya mba :D.. visit back ya..

    BalasHapus
  3. keren mba , makin bagus ajah tutornya

    BalasHapus
    Balasan
    1. hanya hobby modifikasi mas, apalagi yang berhubungan dengan perkodean seperti HTML dan CSS

      Hapus
  4. keren juga neng hasilnya, saya sudah menyimpannya untuk sekali-kali nanti digunakan pas bahas tutorial blog.

    BalasHapus
  5. Wah, kotak jadi makin elegan ditambah efek css ini... BTW ane blm ngerti css sepenuhnya nih, boleh dibookmark blog sobat nih, hehehe

    BalasHapus
  6. wih keren textbox nya, bisa dicoba nanti :D

    BalasHapus
  7. boleh saya pelajari mbak

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK