Add CSS tools to css-examples

[wbamberg]

@rachelandrew , @Rumyra , I'd love your feedback on this PR.

We currently have a few pages in the CSS docs that are self-contained tools:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator

I think these are useful pages, but they are implemented as live samples. Live samples are really intended to be example code that can also be executed, so the reader can see the code but also see the result of it. These pages use that mechanism but hide all the code and implement a tool's UI in the live sample code.

This makes them really hard to maintain, because the code is treated like content. For example, < has to be escaped, and the code lives in one giant HTML file inside <pre> blocks.

If we want to keep these tools, the best solution I think would be for them to be part of Yari. But as a quicker fix that still helps quite a lot, we could keep them as GitHub pages - then they are more like code, so it should be at least possible to work on them.

I've had this in mind for a while but the final straw was that they are broken in the Markdown conversion (mdn/content#7779). We could perhaps fix it, or leave them as HTML (since they're not very editable anyway), but I thought a better solution would be this. It turned out to be really easy to do.

But I'm not sure how this aligns with the general policy of this repo, so I'd love feedback.

So this PR adds just one of these tools, the border image generator. If you think it makes sense, I'll add the other tools to this PR, and update mdn/content to use EmbedGHLiveSample for these pages.

[wbamberg]

Oh I should have said, you can see the GH example at https://wbamberg.github.io/css-examples/tools/border-image-generator/ .

[teoli2003]

A background on these tools: we got some young student from Eastern Europe as a Summer of Code Intern quite a few years ago to build them :-)

I think to move them is a really good idea, now that we are using git and github!

[wbamberg]

Thanks @teoli2003, I think they did a really good job! Hopefully a move like this will make it easier for people to maintain them.

[rachelandrew]

I think this is a good location for them, so +1 from me.

[wbamberg]

Thanks for the feedback! I got an r+ from Ruth today, so I just added the other tools to this PR, and it's ready for review.

I've made absolutely minimal changes to the pages at this point.

Built pages:
https://wbamberg.github.io/css-examples/tools/border-image-generator/
https://wbamberg.github.io/css-examples/tools/border-radius-generator/
https://wbamberg.github.io/css-examples/tools/box-shadow-generator/
https://wbamberg.github.io/css-examples/tools/color-picker/

I also made a little update to the README. I chose not to list all the tools there so we don't have to keep updating it if we ever add more.