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 at 5 p.m. 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.