Styling for GUI instructions

Question

With a graphical application like Blender, answers often require instructions that include navigating the interface. The standards recommend using <kbd> for this, but the current styling looks like a keyboard key and which is inappropriate (and not something we want to lose).

Proposed solution:

Append the following to the blender.SE stylesheet:

em kbd {
    font-size: 12px;
    font-style: normal;
    color: white;
    text-shadow: none;
    background-color: rgba(25, 25, 25, 0.9);
    border: 1px solid black;
    border-radius: 4px;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
    vertical-align: middle;
}

em kbd + kbd {
    margin-left: -0.5em;
}

em kbd:after {
    content: url("https://i.stack.imgur.com/naX0c.png");
    display: inline-block;
    margin: -3px 0 0 6px;
    line-height: 0;
    vertical-align: inherit;
}

em kbd:last-child:after {
    content: none;
}

So we can use the following to markup interface interactions:

_<kbd>Add</kbd> <kbd>Mesh</kbd> <kbd>Cube</kbd>_

This'll result in it rendering similarly to Blender's own menus:

Answer 1

Here's a jsFiddle with my proposal.

Changes are all to reflect the Blender menus better:

• linear gradient for selected color
• decreased border-radius: it's really only aesthetic; the Blender menus are square
• changed border color to the actual color (#282828, not #000000)

I put the example in context with a paragraph (to show line height), a kbd tag (to contrast the two), and the full Blender.SE stylesheet, to make sure nothing interferes.

Regarding the text color: I know that Blender uses a black color, but white just seems a bit nicer on the eyes to me. What do you guys think?

(If you want to see the difference, open the link, in the CSS at top right, change color: white; to color: black; and press Run or CtrlEnter.)

Answer 2

So instead of asking others for iterations of designs I thought I would share my own, this is just an extension on the designs that others have done so far.

I haven't the skill to create these with css so I have just mocked this up in photoshop.

Firstly I have increased the spacing, or padding, between the text and the border of the box, I felt other designs were too squashed together. I also increased the gaps inbetween the boxes themselves, I don't think it's necessary that they touch, the arrow is enough to indicate they follow on from each other. I think this also helps to identify them as separate elements.

Actual size (drop shadows could probably be bigger at this size):

From the designs above my personal preference is number 8. While it doesn't use the traditional black of the blender menus I do feel it's slightly more readable (for me).

Number 9 is probably unnecessary, it has a slight bevel to try and imitate the blender menus more, but it's faint even at a larger size so it's largely pointless.

I don't know if the drop shadows are entirely necessary they are just another way of separating these 'menu paths' from the rest of the text. I think it's good to have the last element highlighted as blue just to clearly signify that that is the menu item/option you should be looking for. It uses a vertical gradient from light blue to dark blue using roughly the correct blender colours.

The font is the 'blender font' DejaVu Sans, I wasn't sure if other examples used this or not or whether it's even usable on the web. Certainly it's very clean to read.

Feel free to disagree with these points I know it's all very subjective. I also realise I haven't shown any iteration on padding or rounded edges, it can be very hard to judge very small details like that, but I look forward to your feedback/thoughts.

Answer 3

I love this idea, but I also think it should be use in addition to the tags. Reason being, sometimes we need to use kbd separately from menus for example.