All Projects → javierbyte → Img2css

javierbyte / Img2css

Convert any image to pure CSS. Recreates images using only box-shadows.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Img2css

Cohesive Colors
Tool that may help you to create cohesive color schemes.
Stars: ✭ 492 (-79.01%)
Mutual labels:  frontend, design
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+303.71%)
Mutual labels:  frontend, design
Vue Bootstrap With Material Design
Vue Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 803 (-65.74%)
Mutual labels:  frontend, design
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (-90.53%)
Mutual labels:  frontend, design
Tachyons
Functional css for humans
Stars: ✭ 11,057 (+371.72%)
Mutual labels:  frontend, design
Bootstrap Italia
Bootstrap Italia è un tema Bootstrap 4 conforme alle linee guida di design per i servizi web della PA
Stars: ✭ 193 (-91.77%)
Mutual labels:  frontend, design
Visual Center
Proposed tool to better align logos in the center of a container.
Stars: ✭ 1,338 (-42.92%)
Mutual labels:  frontend, design
Uix Kit
A free UI toolkit based on some common libraries for building beautiful responsive website, compatible with Bootstrap v4.
Stars: ✭ 318 (-86.43%)
Mutual labels:  frontend, design
Components
Fully responsive and beautiful HTML components made with VueJS and TailwindCSS.
Stars: ✭ 121 (-94.84%)
Mutual labels:  frontend, design
React Textgradient
Text gradients with CSS with SVG fallback. [unmaintained]
Stars: ✭ 110 (-95.31%)
Mutual labels:  frontend, design
Topluluk Rehberi
Geliştiriciler için topluluk rehberi
Stars: ✭ 219 (-90.66%)
Mutual labels:  frontend, design
Guides
An organized list of guides and tutorials for design, development, and system administration.
Stars: ✭ 166 (-92.92%)
Mutual labels:  frontend, design
Ui Challenges
UI challenges by Semicolon, we accept challenges on twitter on #SemicolonChallenge
Stars: ✭ 69 (-97.06%)
Mutual labels:  frontend, design
Tachyons Verbose
Functional CSS for humans. Verbose edition.
Stars: ✭ 102 (-95.65%)
Mutual labels:  frontend, design
Data Populator
A plugin for Sketch and Adobe XD to populate your design mockups with meaningful data. Goodbye Lorem Ipsum. Hello JSON.
Stars: ✭ 1,665 (-28.97%)
Mutual labels:  design, design-tool
Resources
This repo is a one stop destination to find resources for learning various domains. You can find the roadmap for any domain here.
Stars: ✭ 198 (-91.55%)
Mutual labels:  frontend, design
Viewui
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 2,487 (+6.1%)
Mutual labels:  frontend
Blogetc
Easily add a full Laravel blog (with built in admin panel and public views) to your laravel project with this simple package.
Stars: ✭ 198 (-91.55%)
Mutual labels:  frontend
The Front End Knowledge You May Not Know
😇 你可能不知道的前端知识点
Stars: ✭ 2,238 (-4.52%)
Mutual labels:  frontend
Osrm Frontend
Modular rewrite of the OSRM frontend using LRM
Stars: ✭ 197 (-91.6%)
Mutual labels:  frontend

img2css

Convert any image to pure CSS.

img2css

How does it work?

It has two different outputs, pure css shadow matrix [1] and base64 embedded image [2].

  • Pure CSS: This output was created by resizing and setting each pixel as a box-shadow of a single pixel div, so no img tag or background-image is needed. This can result in huge outputs, and the use of this output is not recommended for production unless there is no other option.
  • Base64: The entire image file is embedded inside the <img> tag using base64, so no need external hosting is needed.

Development

Run development server:

npm run dev

Build

npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].