Use CSS shapes, not images for program lights and switches

Why we need to do this

It's easy to point an img src= at something and *poof* your picture, big or small is there. But as the number of these externam computational resource references increases - mostly due to DNS and http web pages become slow, stall and sometimes become unusable.

2000 bytes
one http connection
for this graphics image

If the shape can be drawn with CSS then,
it's a couple of lines of code, zero network traffic,
not 20,000 bytes of image data sent over an encrypted connection

Not only does the problem increase as the number of icons and images more frequently filling up pages but the machine resources associated with these had increased dramatically in time to set up encrypted sessions for dnssec and https it now takes longer to do it's thing than before the cpu intensive cryptography was widely used.

The images can be sent with the HTML payload, inlined with base64 encoding for example. This solves the problem of a number of connections but increases the size of the html file to ridiculous sizes, ironic in a page that might otherwise have a dozen HTML statements.

With the addition of gradients, both linear and radial to the markup engines in modern web browsers another door has opened in the world of computer graphics. We can haz shading.

The drawing of shapes with CSS3 is something of a black art, trying to coerce arbitrary geometric shapes and effects with a language in three orthogonal parts used to make sure text flows nicely. But with layers of DIV's and gradients simple program widgets can be defined in a few lines of text, and not downloaded from a server in Japan or Iceland (which might work ok if you were in Iceland or Japan).

I've looked for a couple of years and there doesn't seem to be any sort of free online tool to generate buttons from CSS and the NeXT closest thing, Keith Oolf's PixelSight was shut down years ago and has not borne a successor.

I thought by now somebody would have done this, but they haven't and I've made some progress towards one and think it should be continued. I have a half baked demo of one working enough I used a button it made. I think it should be made into a real program.

List of CSS editors

There is a list of CSS editors I made by looking at all of them. None of them have concepts of layers nor are any designed for manipulating graphical objects though a ui; the one exception is Tridiv, but that's a full blown 3D rendering system and isn' appropriate fo knocksin gout buttons and lights for a program quickly.

Details of the development of the buttons.