|
1 |
| ->### A Big Update And Refactor Is Coming |
| 1 | +# Pixel Art to CSS |
2 | 2 |
|
3 |
| ->Please be patient and do not send a PR these days...I promise it will not be long. New exciting features will be integrated soon. |
| 3 | +<a target='_blank' href='http://www.recurse.com' title='Made at the Recurse Center'><img src='https://cloud.githubusercontent.com/assets/2883345/11325206/336ea5f4-9150-11e5-9e90-d86ad31993d8.png' height='20px'/></a> |
4 | 4 |
|
5 |
| -# Pixel-art to CSS with react |
| 5 | +### Did you know that you can draw and animate pixel art using CSS? |
6 | 6 |
|
7 |
| -<a target='_blank' href='http://www.recurse.com' title='Made at the Recurse Center'><img src='https://cloud.githubusercontent.com/assets/2883345/11325206/336ea5f4-9150-11e5-9e90-d86ad31993d8.png' height='20px'/></a> |
| 7 | +**pixel-art-react** is a handy and intuitive tool, that can help you to design your awesome drawings and animations! |
8 | 8 |
|
9 |
| -### Did you know that you can create pixel art using a single CSS property? |
| 9 | +Try to draw some pixels on the screen, **pixel-art-react** will generate the CSS code using **box-shadow** property. |
10 | 10 |
|
11 |
| -**pixel-art-react** is a handy and intuitive tool, that can help you to design your awesome drawings! |
| 11 | +Create as much drawings as you want in your project adding new frames and then check them in motion! it will use CSS **keyframes** to get the animation done and the CSS code will be ready to use in your HTML blocks. |
12 | 12 |
|
13 |
| -Try to draw some pixels on the screen, **pixel-art-react** will generate the CSS code using **box-shadow** property, ready to use in your HTML blocks. |
| 13 | +Please check the following example: |
14 | 14 |
|
15 |
| -Check the following **_mini-pixel-spiderman_** example: |
| 15 | + |
16 | 16 |
|
17 |
| - |
| 17 | +The app layout is responsive and adjust itself to the screen width. You can see different layout examples (desktop and mobile) in the screenshot. |
18 | 18 |
|
19 | 19 | The project is built with **React**, **Redux** and **ImmutableJS**. Trying to avoid side-effects in a functional way of programming.
|
20 | 20 |
|
21 |
| -You will be able to **load** and **save** drawings, **undo** **redo** your actions, change grid properties, **share** your drawings and **download** them, everything in a very easy and fast way. |
| 21 | +You will be able to **load**, **save**, **import**, **export** projects, **undo** **redo** your actions, change grid properties, **share** your drawings/animations and **download** them, everything in a very easy and fast way. |
| 22 | + |
| 23 | +Check the results of this simple project: |
| 24 | + |
| 25 | + |
22 | 26 |
|
23 |
| -##### See it live at [pixelart-to-css-react](http://pixelart-to-css-react.herokuapp.com/) |
| 27 | +##### See it live at [pixelart-to-css-react](http://pixelart.jvrpath.com/) |
24 | 28 | #### Help me to improve it, share and enjoy :)
|
25 | 29 |
|
26 | 30 | ## Technical overview
|
|
0 commit comments