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.
0 comments
Reply