diff --git a/README.md b/README.md index 2167e70..4448745 100755 --- a/README.md +++ b/README.md @@ -2,26 +2,6 @@ Convert any image to pure CSS. -[Live demo](http://javier.xyz/img2css/) - -[![img2css](docs-assets/screenshot.jpg)](http://javier.xyz/img2css/) - -## How does it works? - -Well, it just puts the image in a canvas, calculates an array with the rgb values, and then... creates a single pixel shadow for each value! - -## Why? -Hum... to demonstrate the power of CSS! - -And this may have other interesting applications, like creating loading screens with pixel art or pixel-level animation. - -I made another proof-of-concept using pixel-level animations here http://javier.xyz/morphin/ - -## Planned features -* Make the result smaller with smarter shadows and common background detection. -* Make animation and image morphing by using css transitions on the shadows. See http://javier.xyz/morphin/ -* Add scale options to better support pixel art. -* Support for custom image filters. ## Development Run development server: @@ -33,4 +13,4 @@ Build ``` npm run build -``` \ No newline at end of file +``` diff --git a/index.html b/index.html index 9096c06..e2bd8e1 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@ - - + + - + @@ -23,35 +23,17 @@

img2css.

-
This is a tool that can convert any image into a pure css image.
-
Try it! (It's cpu heavy, please try with a small image first).
-
- -
+
-
- Want a programatic way to do this? Look at base64-image-utils. -
-
- I also made a per per-pixel animation experiment, see morphin. -
-

-
- Created by javierbyte. Follow me on . -
+ + +
+
- - + diff --git a/src/App.js b/src/App.js index 5e4fc6b..4f38587 100755 --- a/src/App.js +++ b/src/App.js @@ -117,10 +117,12 @@ var App = React.createClass({
+ {`
`}
} + ); }