mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-23 10:46:13 +02:00
Code Issues Releases Wiki Activity
Files
fb65ee55413da21b5083d0089ff17aa59a0a561f
csslayout/contents/keyboard-shortcut.md
Phuoc Nguyen d166d682ea feat: Sticky sections
2022-09-21 14:31:37 +07:00

665 B
Raw Blame History

layout, title, description, keywords
layout title description keywords
layouts/post.njk Keyboard shortcut Create a keyboard shortcut with CSS kbd tag, keyboard shortcut

We use the native kbd tag to display the keyboard shortcut.

HTML

<kbd class="keyboard-shortcut">...</kbd>

CSS

.keyboard-shortcut {
    /* Background and color */
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    color: rgba(0, 0, 0, 0.7);

    /* Bottom shadow */
    box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;

    /* Spacing */
    padding: 0.25rem 0.5rem;
}

{% demo %} {% include "covers/keyboard-shortcut.njk" %} {% enddemo %}