From bb571d1469742e625942194d8c0cba6f7faa60f8 Mon Sep 17 00:00:00 2001 From: jeffrey gaboni Date: Thu, 20 Aug 2020 02:36:30 +0800 Subject: [PATCH 1/6] Update README.md --- README.md | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) 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 +``` From 673b5f53bc7a279d0ab5c414648bc90387187ea0 Mon Sep 17 00:00:00 2001 From: jeffrey gaboni Date: Thu, 20 Aug 2020 02:37:51 +0800 Subject: [PATCH 2/6] Update index.html --- index.html | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 9096c06..7a081dd 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@ - - + + - + @@ -23,23 +23,13 @@

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 . -
+ + +
+
From df8b206ab03da1cb0fcd324f4200434d1814b489 Mon Sep 17 00:00:00 2001 From: jeffrey gaboni Date: Thu, 20 Aug 2020 02:38:58 +0800 Subject: [PATCH 3/6] Update index.html --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 7a081dd..628d3c3 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,6 @@

img2css.

- - + From c1186b6b5d556f5f62366fa06c7a83680ed7da80 Mon Sep 17 00:00:00 2001 From: jeffrey gaboni Date: Thu, 20 Aug 2020 02:53:08 +0800 Subject: [PATCH 5/6] Update App.js --- src/App.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 5e4fc6b..f790304 100755 --- a/src/App.js +++ b/src/App.js @@ -115,12 +115,14 @@ var App = React.createClass({
The code:
- + + ); } From ca1985ae87b73bf59b43fe22af1560f592dc457e Mon Sep 17 00:00:00 2001 From: jeffrey gaboni Date: Thu, 20 Aug 2020 02:54:33 +0800 Subject: [PATCH 6/6] Update App.js --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index f790304..4f38587 100755 --- a/src/App.js +++ b/src/App.js @@ -115,13 +115,13 @@ var App = React.createClass({
The code:
- + );