Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

UTSOURCE/shadow-converter-app

Repository files navigation

Photoshop 投影转 CSS 工具 (shadow-converter-app)

GitHub license PRs Welcome GitHub issues

这是一个基于 React 和 Tailwind CSS 构建的在线工具,旨在帮助网页开发者和设计师快速将 Adobe Photoshop 中的图层投影 (Drop Shadow) 和文字投影 (Text Shadow) 效果,转换为可直接在项目中使用的 CSS3 box-shadowtext-shadow 代码。

在线访问: https://shadow-converter-app.chinahome.eu.org/

✨ 功能特性

  • 实时预览: 所有参数的调整都会即时在预览区域显示效果。
  • 双模式转换: 支持 box-shadow (图层投影) 和 text-shadow (文字投影) 两种模式。
  • 参数全面: 完全模拟 Photoshop 的投影参数。
  • 交互友好: 支持通过滑块拖动或直接输入数值进行精确调整。
  • 一键复制: 方便地复制已生成的 CSS 代码到剪贴板。
  • 现代化界面: 使用 Tailwind CSS 和 Lucide Icons 构建,界面简洁美观。

🛠️ 技术栈

  • React: 用于构建用户界面的 JavaScript 库。
  • Tailwind CSS: 一个功能类优先的 CSS 框架。
  • Lucide React: 简单、美观的开源图标库。
  • Create React App: 用于初始化和管理 React 项目。

🚀 安装与启动

  1. 克隆项目
    git clone [https://github.com/UTSOURCE/shadow-converter-app.git](https://github.com/UTSOURCE/shadow-converter-app.git)
    cd shadow-converter-app
  2. 安装依赖
    npm install
  3. 运行项目
    npm start
    应用将在 http://localhost:3000 启动。

🤝 如何贡献

我们非常欢迎社区的贡献!如果您想为这个项目做出贡献,请查阅我们的 贡献指南 (CONTRIBUTING.md)

同时,我们希望社区的每一位成员都能遵守我们的 行为准则 (CODE_OF_CONDUCT.md)

📄 开源许可证

本项目采用 MIT 许可证

About

Photoshop 投影转 CSS 工具

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /