前端的一些资料和工具

开发工具

• sublime Text

  Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

• EditPlus EditPlus是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

---

色彩与图标

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

  

•