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 .

Baca juga