|
|
新出来的在线工具和 web 应用允许开发人员快速创建网站，而无需手动一行一行地编写代码。当前，不断有新的框架和代码库涌现在前端开发这个领域里。但是，这也让许多开发人员忘记了代码生成器以及它们在构建网站时的作用。以下资源是完全免费的 web 应用，可用于生成图案、渐变、甚至浏览器前缀属性的 CSS3 代码。
2 Y! I, O& C- ?3 Y8 a2 B1、CSS3 Generator9 O+ m/ V0 ?1 \* G$ u
; L# S; z- e" y2 u
官方网站：http://css3generator.com/# G# q% a) A; h- l& D& e8 Z% ?
大家最喜爱的用于代码生成的 web 应用之一就是 CSS3 Generator。对于不同类别的代码生成器，包括 RGBa，transform，flexbox 等等，它有不同的页面。另外，每个代码生成器还包括用于解释哪个浏览器版本完全支持该属性的图标。
" w: J+ O5 ^( i \) ~2、Enjoy CSS- E9 |/ C% r, s3 B; w/ Y3 [
! s$ A# L* U# \官方网站：http://enjoycss.com/
) ?1 T# j D( D- A 想要更动态的应用程序，那么试试 Enjoy CSS 网站。它意味着一个完整的代码生成器，可用于动态项目中自定义的输入域或 CSS3 按钮。它可提供定制的代码，用于转换和过渡，并预建项，如 CSS3 按钮这样常见的页面元素。
/ m( W& I7 c3 C3 N3、Patternify5 Q; S t3 s, _9 D4 r
; c. A; y' U1 L+ e3 ~
官方网站：http://www.patternify.com/
; g( y8 `9 H+ L* A5 k( w 除非你已经学习过 Photoshop，否则再从头开始学的话，难免会成为你一个很大的难点。值得庆幸的是，Patternify 是一个免费工具，可生成你平铺 CSS 模式所需要的一切。使用 Base64 代码添加到 CSS 时会生成背景。你可以用原始的像素数据绘制自己的模型，甚至从一堆预设的模式中进行选择。Photoshop 毫无疑问是一个更好的选择，但 Patternify 也不错，如果你没有学过 PS 或其他图形设计程序的话。3 g4 w4 n% s* [2 K6 E( b$ Z9 r
4、 ColorZilla Gradients
6 c% W) c9 N' v# w
" I( t! `1 M5 B1 s4 `+ f. E
官方网站：http://www.colorzilla.com/gradient-editor/
4 f. i9 s8 v) h+ i* X0 r CSS3 渐变是语言中最复杂的功能之一。很容易导致代码变得出奇地冗长。ColorZilla 的渐变编辑器是一个免费的用于 CSS3 背景渐变的生成器。该设置非常类似 Photoshop 或其他的颜色选择器界面。你可以在同一个渐变中对大量的颜色设置多个断点，也可以从 HEX 或 HSL 或 RGBa 代码中选择输出选项。1 C S2 Y: }. y( ^. t( H0 L" a
5、CSSmatic4 d& p0 j' O0 G# q& U
# \9 e# \- A8 m" D' [
官方网站：http://www.cssmatic.com/
9 r" a0 x; ?, k$ X1 e 另一种免费的多功能 web 应用程序是 CSSmatic。我之所以称之为“多功能”的应用程序，是因为它可以生成 4 个不同的 CSS 属性：渐变、圆角边框、圆角和框投影以及 BG 噪音。整个网站完全免费，并且有望在将来增加更多的功能。
) @: g7 R) g7 W+ ^. {! G6、CSS Type Set
. v9 V$ v5 ?% W; p* t& r( t
$ ?* {* ^2 a2 t8 \& j, q K: a2 J官方网站：http://csstypeset.com/4 O+ _) H3 U5 ~9 T
当我们投入到设计时，很容易忘记排版，但这却是任何网页最重要方面之一。Resets 是挺不错的，但有时我们总希望能够自动化进程。CSS Type Set 通过实时预览文本，并提供 CSS 代码复制到自己的网站，以实现这个目标。
' ]( @ n; f$ S: e! w, j$ l. R1 I7、Prefixr
% `2 f8 v9 M8 V: O1 a& |+ U
* f# _' O4 Q" r0 h
官方网站：http://prefixr.com/5 `8 }2 D( O9 q" s8 [! l# A% y
每个开发人员都饱受编写自定义前缀来处理所有 web 浏览器的痛苦。值得庆幸的是，标准已经经过漫长的进展，现在并非所有的前缀都需要添加——但许多仍然需要。Prefixr 是一个免费更新 CSS 代码以包括所有必需前缀属性的工具。
, {6 A* A1 a1 z* v: d/ t8、Pleeease Play
9 Q; }$ M! K. M8 S/ d Y. r: ?
6 M, F. O. B5 U* I" C
官方网站：http://pleeease.io/play/
( K% f! R/ D3 g9 e. B/ `# Z5 ^ Prefixr 的另一个选择是 Pleeease Play web 应用。这是另一个 CSS 前缀生成器，它也可以执行其他高级的 CSS3 更新。最值得注意的是，你会发现在其他整洁效果中，它向后兼容更新 CSS3 不透明度，过滤器和伪元素。再加上界面超级好用，因此成为了开发人员再次检查代码的好助手。
! B- o6 e& X- n8 J% B5 l% }& u0 |: e, w9、CSS3 Button Generator
/ k0 Y8 `2 Q& \. f: F
1 }- t. I( X7 E' t& ~# N4 k
官方网站：http://css3buttongenerator.com/6 u! ^) K, o- i A; y
传统按钮和输入元素总是受限于操作系统的默认样式。现在比以往任何时候都更容易定制独特的按钮——最大的问题是将你的设计从 Photoshop /草图翻译到 CSS3。一旦你学会所有的 CSS 属性，这就会变得容易起来，但你仍然需要写很多行代码。CSS Button Generator 是用于自定义按钮样式和标签文本的免费工具。只要修改设置，就能自动生成和更新代码。) ^ p, T9 L# X( R
10、Best CSS Button Generator
6 T4 f' ~6 ]# p6 X; b1 H9 G: e s
. K- b8 }( b% K3 M$ _% T& i
官方网站：http://www.bestcssbuttongenerator.com/# `% w( F5 ~& q; a
对于按钮代码，还有一种方法是 Best CSS Button Generator。这也是完全免费的，并且界面简单。最重要的，你可以从预设的按钮中选择并使用模板用于自己的设计。如果你是一个 Chrome 浏览器用户，那么也可以从网站的外部访问此款免费的浏览器扩展。 |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-7-17 08:53:06