前端优秀辅助工具(html5+css3)(原创)

王朝学院·作者佚名  2016-05-05
窄屏简体版  字體:   |    |    |  超大  

CSS3对于前端工程师来说,越来越重要了。有很多CSS3的效果真的不需我们自己一个一个

去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很

多时间,让你有更多的时间去做自己想要做的事情。

CSS Animatie

CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。

http://cssanimate.com/

[flash=500,400]http://s1.knowsky.com/20131005/hfmrds5vwnt081427656.jpg[/flash]

Long Shadows Generate

Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。

http://sandbox.juan-i.com/longshadows/

[flash=500,400]http://s1.knowsky.com/20131005/ck43iv2m1ca091427756.jpg[/flash]

Fontastic

Fontastic是一个在线生成字体图标的app,可以定制属于自己的图标字体。

http://fontastic.me/

[flash=500,400]http://s1.knowsky.com/20131005/t0fltikbsgn091427956.jpg[/flash]

Screensiz.es

Screensiz.es站收集整理了移动端的相关尺寸。

http://screensiz.es/phone

[flash=500,400]http://s1.knowsky.com/20131005/433n33tuy2h091428156.jpg[/flash]

Live Tools

Live Tools是一个UI制作工具,他提供了按钮、表单、icon图标和Ribbons的制作工具,

可以在线配置相关参数,生成你需要的效果代码。

http://livetools.uiparade.com/index.html

[flash=500,400]http://s1.knowsky.com/20131005/503suhdvsb1091428256.jpg[/flash]

Button Generator

生成和图片效果一样的按钮工具。

http://www.cssbuttongenerator.com/

[flash=500,400]http://s1.knowsky.com/20131005/qrjw40agsua091428556.jpg[/flash]

@FONT-FACE GENERATOR

@FONT-FACE GENERATOR只需其中一种字体,就可以帮我们转换成@font-face各浏览器

下所需的所有字体格式。只是中文字体太大,不太好用。

http://www.fontsquirrel.com/tools/webfont-generator

[flash=500,400]http://s1.knowsky.com/20131005/l43szzqleus091428856.jpg[/flash]

@font-face ICON图标

ICON使用@font-face制作是越来越普遍了,但有一些icon字体库有几个icon,而往往我

们有时候只需要其中的几个,加载所有的icon感觉浪费,其实没有必要这么做的,在线

有两个网站,上面提供了各种字体icon库,我们只需要选择其中的部分,进行安装就OK了。

http://fontello.com/

[flash=500,400]http://s1.knowsky.com/20131005/ozlfo1a0l3x091429156.jpg[/flash]

http://icomoon.io/app/#/select

[flash=500,400]http://s1.knowsky.com/20131005/eqh1tliu2i5101429356.jpg[/flash]

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator真心的好用,是我常用的一个在线制作渐变的工具,

他除了类似于photoshop的渐变工具之外,还是Firefox和Chrome浏览器的一个插件。而

且还能生成兼容IE的滤镜代码,好强大的。

http://www.colorzilla.com/gradient-editor/

[flash=500,400]http://s1.knowsky.com/20131005/4tvp0pgibni101429556.jpg[/flash]

Pageblox

Pageblox是一款在线生成布局的工具,提供了七种常见的布局模式,而且还可以根据自

己的需求做一些自定义的设置。

https://www.pageblox.com/generate

[flash=500,400]http://s1.knowsky.com/20131005/mtawqfhptuv101429756.jpg[/flash]

CSS Load

CSS Load是一款纯代码制作loading的工具。

http://cssload.net/

[flash=500,400]http://s1.knowsky.com/20131005/k2z0r2tta4n101429956.jpg[/flash]

【ecd】css3 Animation tool

腾讯ECD推出一款强有力的CSS3动画制作工具。

http://ecd.tencent.com/css3/tools.html

[flash=500,400]http://s1.knowsky.com/20131005/qxgforoasum101430156.jpg[/flash]

Character-Code

Character-Code.com提供了对应的字符编码,可以查询出对应的字符编码。

http://www.character-code.com/

[flash=500,400]http://s1.knowsky.com/20131005/50lbbepz0r5101430356.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/jw3fweackok101430456.jpg[/flash]

站酷ID: Hlcc

[flash=500,400]http://s1.knowsky.com/20131005/fbxc4foreww111430656.jpg[/flash]

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航