Neumorphism 开源项目使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00584/article/details/141080718

Neumorphism 开源项目使用教程

neumorphism🎉 Generate CSS for your Neumorphism/Soft UI design 项目地址:https://gitcode.com/gh_mirrors/ne/neumorphism

1. 项目的目录结构及介绍

neumorphism/
├── css/
│   ├── buttons.css
│   ├── cards.css
│   ├── checkboxes.css
│   ├── inputs.css
│   ├── loaders.css
│   ├── switches.css
│   └── toggle.css
├── js/
│   └── main.js
├── index.html
├── README.md
└── config.json

css/: 包含所有与 Neumorphism 风格相关的 CSS 文件，如按钮、卡片、复选框、输入框、加载器、开关和切换开关的样式。
js/: 包含项目的主要 JavaScript 文件。
index.html: 项目的入口 HTML 文件。
README.md: 项目的说明文档。
config.json: 项目的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 index.html。这个文件包含了项目的初始化代码和基本的 HTML 结构。以下是 index.html 的部分代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism</title>
    <link rel="stylesheet" href="css/buttons.css">
    <link rel="stylesheet" href="css/cards.css">
    <link rel="stylesheet" href="css/checkboxes.css">
    <link rel="stylesheet" href="css/inputs.css">
    <link rel="stylesheet" href="css/loaders.css">
    <link rel="stylesheet" href="css/switches.css">
    <link rel="stylesheet" href="css/toggle.css">
</head>
<body>
    <div id="app"></div>
    <script src="js/main.js"></script>
</body>
</html>

3. 项目的配置文件介绍

项目的配置文件是 config.json。这个文件包含了项目的各种配置选项，如颜色、字体和其他 UI 相关的设置。以下是 config.json 的部分代码示例：

{
    "theme": {
        "primaryColor": "#F0F0F3",
        "secondaryColor": "#FFFFFF",
        "fontFamily": "Arial, sans-serif"
    },
    "ui": {
        "button": {
            "borderRadius": "12px",
            "boxShadow": "10px 10px 21px #d3d3d6, -10px -10px 21px #ffffff"
        },
        "card": {
            "borderRadius": "20px",
            "boxShadow": "20px 20px 60px #d3d3d6, -20px -20px 60px #ffffff"
        }
    }
}

通过这个配置文件，开发者可以轻松地调整项目的主题和 UI 元素的样式，以适应不同的需求和设计风格。

neumorphism🎉 Generate CSS for your Neumorphism/Soft UI design 项目地址:https://gitcode.com/gh_mirrors/ne/neumorphism