إنضم لنا

Cara membuat html kbd keren





Apa itu kbd kbd ada sebuah html global yang cocok di terapkan dengan syste class biasanya
memiliki peran penting dalam pembuatan keyboard untuk perangkat lunak android iOs,

Kbd bisa kita data menggunakan style atau css yang akan kita panggil menggunakan html class
biasanya kbd memiliki pendekatan dengan html yang serupa tapi memiliki tampilan yang berdeda misalnya
pre, mark, ,code, texarea, dan kbd,

Code pre, akan menghaslkan
contoh code pre 
Penulisannya seperti ini <pre></pre> untuk menghasilkan style tentu harus di trapkan system css

begitu juga dengan mark mark akan mengasilkan
contoh code mark

Dengan gaya dan style css yang telah di tetapkan ,

Namun di sini saya akan membahas kode <kbd> yang akan saya beri style css sehingga akan menghasilkan kemiripan dengan sebuah keyboard namu akan memanfaatkan class

Ini contoh kode kbd tanpa class
normal

namun telah di beri css, tetap dan cara penulisanya seperti ini <kbd></kbd>

sekarang kita beri class seperti ini
<kbd class="dark"></kbd>
Dan css seperti ini
kbd.dark {
  color: #eeeeee;
  text-shadow: 0 -1px 0 #000000;
  border-color: #000;
  background-color: #4d4c4c;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.5)), color-stop(80%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=0);
  box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
}
Makan akan menghasilkan seperi ini


dan ini adalah style yang terdapat pada ios
<kbd class="ios"></kbd>
Di bawah ini css nya
kbd.ios {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  border-color: rgba(0, 0, 0, 0.6);
  border-top-color: rgba(0, 0, 0, 0.4);
  background-color: #b7b7bc;
  background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
  background-image: -webkit-linear-gradient(top, #efeff0, #b7b7bc);
  background-image: -o-linear-gradient(top, #efeff0, #b7b7bc);
  background-image: linear-gradient(top, #efeff0, #b7b7bc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefeff0', endColorstr='#ffb7b7bc', GradientType=0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
}
Maka akan menghasilkan seperti ini



Dan yang terakhir class Android penulisanya seperti ini
<kbd class="android"></kbd>
<kbd class="android dark"></kbd>
<kbd class="android color"></kbd>

Di bawah ini css nya
kbd.android {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
  text-shadow: none;
  padding: .3em;
  border: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: #5e5e5e;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
}
kbd.android.dark {
  background: #222222;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
}
kbd.android.color {
  background: #083c5b;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
}
Dan akan menghasilkan seperti ini







Full code

Semoga dapat membantu .
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail