色彩与图标 CSS滤镜 渐变CSS代码生成器 QQ截图取色-16进制 配色 图标 数据处理 Json 展示 reveal.js 这里记录一些我用到的或者见到的比较好用方便的前端开发相关的工具吧。 色彩与图标 CSS滤镜 Filter Effects 界面: 有各种各样的滤镜效果,可以直接调节参数观察变化。 值得一提的是,这个网站还有很多其他 css 生成器。 比如:Border Image, Border Radius, Box Shadow, Filter Effects, Multi-Column, Outline Border, Overflow(x,y), RGBa, Text Rotate, Text Shadow, Textarea Resize, Transform 可以访问这里去使用这些 css 生成器:CSS Generators 渐变CSS代码生成器 Ultimate CSS Gradient Generator 界面如下图: 目前 css 写渐变还很复杂,但是用了这个工具简直太方便了,直接生成 css 代码,还能兼容 ie。 QQ截图取色-16进制 在按下 Ctrl+Shift+A 后,再按一下 Ctrl 就可以看到截图框下面的颜色代码变成16进制的代码了。 如下图: 普通截图: 按住 Ctrl: 可以看到第一幅图中的 51, 51, 51 变成了 #333333。 配色 nipponcolors 日本的一个配色网站。罗列了很多不饱和经典的颜色,当然,自己选配还是很重要的。 Adobe Color CC Adobe 出的在线配色工具,里面有些现成的配色方案还是很不错的。 paletton 提供了各种预览模式,可以在模板网站中预览,在色块中预览。 图标 easyicon 对中文的搜索支持很好。实际上它是先把中文翻译为英文再搜索的。 Font-Awesome 比上面介绍的那个好用的多,字体图标,不需要考虑像素大小,全部是矢量图。并且图标精美。如果不使用 BootStrap,单独添加图标的话,这一套图标在合适不过了。 iconfont.cn 阿里巴巴制作的图标库。 数据处理 Json json editor 将json数据输入进去,会生成一个树形的结构,方便查看每个节点。 展示 reveal.js reveal.js 在网页上展示 slides 幻灯片,太酷了。针对不会代码的人还有一个在线编辑器:http://slides.com 还有一个新手入门教程:Reveal.js Tutorial-Reveal.js for Beginners 本文不定期更新。