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.sstatic.net/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:

Example rendering from Firefox

  • $\begingroup$ This looks lovely. Let's hope it is possible. $\endgroup$
    – iKlsR
    Commented Aug 17, 2013 at 20:20
  • 1
    $\begingroup$ much much better to look at, but still looks like a pain to mark-up. $\endgroup$
    – zeffii
    Commented Aug 17, 2013 at 20:55
  • $\begingroup$ @zeffii Quite.. Though it's not that much more than the current way. (I always put <kbd></kbd>+ in the clipboard when I have to type long or multiple shortcuts :P) I do have a question though, is there a way with this to have separate looks for keyboard shortcuts and interface directions? Is such a separation of keyboard and interface considered necessary? $\endgroup$
    – gandalf3
    Commented Aug 17, 2013 at 21:10
  • $\begingroup$ It would seem <samp> isn't allowed.. $\endgroup$
    – iKlsR
    Commented Aug 17, 2013 at 21:18
  • $\begingroup$ @iKlsR Was sure it was… Oh well, have updated the proposal. ;) $\endgroup$
    – Aldrik
    Commented Aug 17, 2013 at 21:38
  • $\begingroup$ @gandalf3 Yes, this'll leave current shortcut styling unchanged. $\endgroup$
    – Aldrik
    Commented Aug 17, 2013 at 21:46
  • $\begingroup$ @Aldrik +1 looks good to me :) though I'm not sure I understand "and not something we want to loose".. typo? $\endgroup$
    – gandalf3
    Commented Aug 17, 2013 at 22:27
  • $\begingroup$ Question: what's the semantic reason for em? $\endgroup$
    – wchargin
    Commented Aug 17, 2013 at 22:43
  • $\begingroup$ @WChargin Mainly just trying to work within the Stackexchange limitations (lesser of the other evils). But I think it's acceptable to emphasis literal instructions. $\endgroup$
    – Aldrik
    Commented Aug 17, 2013 at 23:42
  • $\begingroup$ Okay, I understand that. Then, another question: I would propose em kbd { background-color: #5680C2;} and em kbd:last-child { background-color: #3F3F3F;} to match Blender's menu colors, the implication being that all but the last are selected (or including the last, if you want to remove the last-child if it makes more sense). For example: rendering in Chrome. $\endgroup$
    – wchargin
    Commented Aug 18, 2013 at 0:51
  • $\begingroup$ @WChargin I decided against it as I felt it lost the menu recognisability. Note if the community does want to go blue, Blender uses a subtle gradient and black text. $\endgroup$
    – Aldrik
    Commented Aug 18, 2013 at 8:41
  • $\begingroup$ my only slight issue with this is that despite the colours it actually reminds me of pre 2.5 interface, but I guess that's just because it's subjective. Would love to see several variations, extra spacing, padding, corner rounding etc. $\endgroup$ Commented Aug 19, 2013 at 12:49
  • $\begingroup$ @RayMairlot Here is a variant of WChargin's proposal with original colors and increased corner rounding, spacing, and padding. $\endgroup$
    – gandalf3
    Commented Aug 22, 2013 at 22:27
  • $\begingroup$ @WChargin I would say that if we want the last one to be different, my personal preference would be to have the last one look like it is selected, rather than the other way around. $\endgroup$
    – gandalf3
    Commented Aug 22, 2013 at 23:44
  • 1
    $\begingroup$ Is there any update on whether this will be possible? In the meantime, should we use <em><kbd> for forward compatibility? $\endgroup$
    – wchargin
    Commented Sep 14, 2013 at 23:31

3 Answers 3


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.)

  • 2
    $\begingroup$ I guess the color will be a matter of personal preference.. I personally prefer the black. $\endgroup$
    – gandalf3
    Commented Aug 19, 2013 at 2:18
  • $\begingroup$ @gandalf3 I could go with either one. $\endgroup$
    – wchargin
    Commented Aug 19, 2013 at 3:27

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.

enter image description here

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

enter image description here

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.

  • $\begingroup$ Don't worry about CSS, we can handle that for you. These are rather large, please scale to the expected usage size for comparison. $\endgroup$
    – Aldrik
    Commented Aug 23, 2013 at 13:30
  • 3
    $\begingroup$ "roughly the correct blender colours" the exact ones, if you'd like them, are #7aa3ef (top) and #5680c1 (bottom). $\endgroup$
    – wchargin
    Commented Aug 25, 2013 at 14:47

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.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .