使用此Adobe-Style Web App编辑器设计CSS

PhotoShop编辑面板可满足您构建定制设计所需的一切。

Adobe的软件在各个年龄段的设计师中都享誉全球，但Photoshop则无非如此。

它使您可以像在Photoshop中一样动态地生成CSS代码 。

现在，有一个名为LayerStyles的免费Web应用程序编辑器 ，它可以在您的浏览器中模仿Photoshop图层编辑器。

如果您访问构建器页面 ，则可以对其进行修改以查看其工作原理。

它们遵循相同的设置，并且会立即在页面上使用演示框进行更新。

该窗口带有五个可以模仿Photoshop的不同样式的面板 。

您可以从以下面板中进行选择：

您还可以获得免费生成的完整CSS代码 。

他们都模仿了Adobe GUI，这使该工具对设计人员如此有趣。

它具有所有选定内容的所有CSS3属性。

只需单击标有“ CSS代码”的左下角框即可获得您的代码段 。

这不仅对于生成CSS很有趣，而且还是学习如何构建Web应用程序的好方法 。

最棒的是，如果您要下载本地副本，则该项目是完全开源的，并且 在GitHub上免费。

它是由开发人员Felix Niklas制作的，他将此作为辅助项目。

该站点使用了大量的JavaScript库以及jQuery插件 。

这也是我到目前为止所见过的最有趣，也许也是最酷的Web应用程序。

您可以在其他地方找到很多代码生成器，但这确实是独一无二的。

您可以在演示页面上修改实时版本 ，并在GitHub上免费找到所有可用的源代码 。

看一看LayerStyles，看看您的想法。

或者，如果您想感谢创建者，则可以鸣叫@mrflix 。

翻译自: https://www.hongkiat.com/blog/design-css-adobe-styles-editor/