Assalamu'alaikum sahabat infoalya.com, apakabarnya ? admin doakan semua dalam keadaan baik, sehat dan banyak rejekinya yaaa..... Aamiin.
Kali ini admin ingin mengajak kawan semua untuk mengenal salah satu jenis tag yang bisa kita manfaatkan untuk menghiasi blog kita, yuukk dibaca.
Tag <kbd> kependekan dari
keyboard. Fungsi dari tag ini adalah mendefinisikan teks yang di input dari keyboard, umumnya font yang ditmpilkan dengan menggunakan tag ini adalah monospaceBerikut adalah contoh penggunaan tag <kbd> tersebut
<!DOCTYPE html> <html> <head> <title>Yuukk Belajar HTML di infoalya.com</title> </head> <body> <h3>Saya senang belajar HTML di infoalya.com</h3> <p>HTML adalah kependekan dari <kbd>Hypertext Markup Language</kbd></p> </body> </html>
dan hasilnya seperti ini TAG KBD
baiklah kawan karena secara umum kita telah memahami fungsi dari tag <kbd> maka sekarang kita terapkan di blog yuukk.
Untuk menghiasi blog dengan tag ini kita hanya perlu menambahkan CSS dibawah ini
kbd{position:relative;color:#000000}kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#00ffe4;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s}kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}kbd{display:inline-block;border:1px solid #979797;box-shadow:2px 2px 1px#979797;border-radius:3px;padding:.2em .5em;margin:.2em;transition:all .3s}kbd:hover{border-color:#000000;color:#FF0000}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#888}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}
Jika ingin menghilangkan
inlinenya kawan hanya menghapus kode dibawah ini sajakbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#00ffe4;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s}
maka secara keseluruhan kodenya seperti ini
kbd{position:relative;color:#000000}kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}kbd{display:inline-block;border:1px solid #979797;box-shadow:2px 2px 1px#979797;border-radius:3px;padding:.2em .5em;margin:.2em;transition:all .3s}kbd:hover{border-color:#000000;color:#FF0000}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#888}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}
Baiklah kawan untuk hari ini itu dulu yang dapat admin sampaikan, jumpa lagi dilain hari yaa, see you...💓💗💖💕