Welcome folks today in this blog post we will be converting image to pure css using img2css library in javascript. All the full source code of the application is given below.
Get Started
In order to get started you need to create a new react.js project and download the full source code of the project as shown below
After downloading it you can see the below directory structure
And also you can get the source code by using the git command as shown below
git clone https://github.com/javierbyte/img2css.git
cd img2css
Development
Run development server:
|
1 2 |
npm run dev |
Build
|
1 |
npm run build |
img2css
Convert any image to pure CSS.
Live demo of Image to Pure CSS Converter
How does it work?
This tool creates a single one pixel shadow per pixel in the source images.
Why?
Hmm… to demonstrate the power of CSS!
And this may have other interesting applications, like creating loading screens with pixel art, display images where <img /> tags are not allowed or supported.
