新出来的在线工具和web应用允许开发人员快速创建网站,而无需手动一行一行地编写代码。当前,不断有新的框架和代码库涌现在前端开发这个领域里。
但是,这也让许多开发人员忘记了代码生成器以及它们在构建网站时的作用。以下资源是完全免费的web应用,可用于生成图案、渐变、甚至浏览器前缀属性的CSS3代码。如果你写的是前端代码,然后这些资源可以为你节省大量的时间,并为今后的项目工作提供可重复片段。
大家最喜爱的用于代码生成的web应用之一就是CSS3 Generator。对于不同类别的代码生成器,包括RGBa,transform,flexbox等等,它有不同的页面。另外,每个代码生成器还包括用于解释哪个浏览器版本完全支持该属性的图标。
官方网站: http://css3generator.com/
想要更动态的应用程序,那么试试Enjoy CSS网站。它意味着一个完整的代码生成器,可用于动态项目中自定义的输入域或CSS3按钮。它可提供定制的代码,用于转换和过渡,并预建项,如CSS3按钮这样常见的页面元素。
官方网站: http://enjoycss.com/
除非你已经学习过Photoshop,否则再从头开始学的话,难免会成为你一个很大的难点。值得庆幸的是,Patternify是一个免费工具,可生成你平铺CSS模式所需要的一切。
使用Base64代码添加到CSS时会生成背景。你可以用原始的像素数据绘制自己的模型,甚至从一堆预设的模式中进行选择。 Photoshop毫无疑问是一个更好的选择,但Patternify也不错,如果你没有学过PS或其他图形设计程序的话。
官方网站: http://www.patternify.com/
CSS3渐变是语言中最复杂的功能之一。很容易导致代码变得出奇地冗长。 ColorZilla的渐变编辑器是一个免费的用于CSS3背景渐变的生成器。
该设置非常类似Photoshop或其他的颜色选择器界面。你可以在同一个渐变中对大量的颜色设置多个断点,也可以从HEX或HSL或RGBa代码中选择输出选项。
官方网站: http://www.colorzilla.com/gradient-editor/
另一种免费的多功能web应用程序是CSSmatic。我之所以称之为“多功能”的应用程序,是因为它可以生成4个不同的CSS属性:渐变、圆角边框、圆角和框投影以及BG噪音。整个网站完全免费,并且有望在将来增加更多的功能。
官方网站: http://www.cssmatic.com/