xmorphic

所属分类:WEB开发
开发工具:TypeScript
文件大小:0KB
下载次数:0
上传日期:2023-05-23 02:12:01
上 传 者sh-1993
说明:  用Vite+React+TS构建的骨架玻璃纳米CSS发生器
(A skeuo glass neu-morphic CSS generator built with Vite + React + TS)

文件列表:
.prettierrc (24, 2023-05-22)
index.html (1063, 2023-05-22)
package-lock.json (194774, 2023-05-22)
package.json (592, 2023-05-22)
public/ (0, 2023-05-22)
public/CNAME (12, 2023-05-22)
public/favicon.ico (16937, 2023-05-22)
public/icon-192.png (36988, 2023-05-22)
public/icon-512.png (211921, 2023-05-22)
src/ (0, 2023-05-22)
src/App.module.scss (7056, 2023-05-22)
src/App.tsx (22562, 2023-05-22)
src/components/ (0, 2023-05-22)
src/components/About/ (0, 2023-05-22)
src/components/About/About.module.scss (86, 2023-05-22)
src/components/About/About.tsx (3046, 2023-05-22)
src/components/NumControl/ (0, 2023-05-22)
src/components/NumControl/NumControl.module.scss (797, 2023-05-22)
src/components/NumControl/NumControl.tsx (930, 2023-05-22)
src/index.css (886, 2023-05-22)
src/main.tsx (246, 2023-05-22)
src/utilities/ (0, 2023-05-22)
src/utilities/share.ts (502, 2023-05-22)
src/vite-env.d.ts (38, 2023-05-22)
tsconfig.json (559, 2023-05-22)
tsconfig.node.json (184, 2023-05-22)
vite.config.ts (813, 2023-05-22)

# [morphic](https://xmorphic.dev) [morphic](https://xmorphic.dev) is a skeuo/glass/neu-morphic CSS generator built with Vite + React + TS. It is inspired by (but not forked from) [neumorphism.io](https://neumorphism.io) and [css.glass](https://https://glass.css), and aims to improve upon those projects in a few crucial ways. ## Design goals - **Portability:** Once your CSS is generated, you shouldn't have to come back to the website if you want tweak its parameters. morphic generates CSS with accessible variables that even non-developers can adjust locally. - **Realism:** morphic leans on real-world physical properties to create its styles. This not only looks good, but also ensures that (almost) every combination of parameters results in a realistic-looking element. - **Using the platform:** morphic takes advantage of CSS variables and other modern CSS features, without requiring third-party libraries or Javascript. ## Shortcomings - **Too much code!** morphic generates a lot of code! And while it's easy to configure, it's often hard to understand, or to modify its internal logic. - **Bad blending ** The element's shadow would ideally use a `soft-light` or `multiply` blend mode onto the background, but this was not possible for technical reasons. - **Old news!** Almost all the code in morphic will be redundant once [relative colors](https://www.w3.org/TR/css-color-5/#relative-RGB) gains widespead browser support. C'est la vie.

近期下载者

相关文件


收藏者