CSS-only Terminal

Recently I wanted to nicely format some code, so I made a CSS-only terminal. The reason I think this one is nice is that it doesn't require any superfluous or non-semantic markup. It is very lightweight, which is good, but wasn't made to be interactive. It doesn't mimic any particular operating system or desktop environment either, and has a simple look.

$ clang hello.c
$ ./a.out
hello, world

All you need to do to use this style is to add one class to an element. To get all buttons you'll also need another element inside. I use this for <pre><code>-style blocks, so the markup requirements are satisfied. Worst case, you'll have to add a superfluous div if you can't think of a semantic markup.

The look will degrade gracefully in older browsers. IE8 loses round borders and shadows which should be easy enough to fix with a polyfill and a filter if you really care. Older browsers get no window decorations, borders or shadows at all.

See this cssdeck for the source.

Published on Nov. 29, 2014 by Nicolas and tagged CSS. You can follow the discussion with the comment feed for this post. Feeling generous? Donate!


Start a new thread

Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.