CSS Shape Generator
July 17th 2013 by Samuel Rossille
Draw pure HTML / CSS drawings from basic shapes: introducing CSS Shape Generator...
Demo here if you don't like to read.
A drawing is often better that a long speech, so here are a couple of pure CSS / HTML drawings:
Everything in the URL: All the data is stored in the URL, so each possible drawing is associated to an URL. This features allows you to.
- save you drawing with the browser’s bookmarks system,
- undo / redo changes with the browser’s back / next buttons,
- send the drawing to a co-worker or a friend: copy / paste the URL.
As an example of this feature, the drawing above are links, so you can click them to see how they look in the editor and edit them.
The editor supports: color selection, drag & drop interface, send to back, bring to front.
HTML of HTML + CSS generation: As you draw, the output is updated, and you can copy paste either standalone HTML with inline style, or HTML + CSS, depending on the situation.
Please visit the demo here: Happy drawing
Disclaimer: this is a beta. Depending on the feedback I will improve it. Also, please use a recent browser.