---
layout: post
title:  "前端的一些资料和工具"
date:   2015-05-18 14:06:05
categories: Tools
tags: tools CSS reveal 配色
excerpt: 记录一些好用的前端工具和框架。
---

* content
{:toc}

这里记录一些我用到的或者见到的比较好用方便的前端开发相关的工具吧。

---

## 色彩与图标

### CSS滤镜

* [Filter Effects](http://www.cssreflex.com/css-generators/filter)

    界面：

    ![Filter Effects](http://7q5cdt.com1.z0.glb.clouddn.com/blog-filter.png)

    有各种各样的滤镜效果，可以直接调节参数观察变化。

    值得一提的是，这个网站还有很多其他 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](http://www.cssreflex.com/css-generators/)

---

### 渐变CSS代码生成器

* [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)

    界面如下图：

    ![Ultimate CSS Gradient Generator](http://7q5cdt.com1.z0.glb.clouddn.com/blog-color-gradient.png)

    目前 css 写渐变还很复杂，但是用了这个工具简直太方便了，直接生成 css 代码，还能兼容 ie。

---

### QQ截图取色-16进制

在按下 `Ctrl+Shift+A` 后，再按一下 `Ctrl` 就可以看到截图框下面的颜色代码变成16进制的代码了。

如下图：

普通截图：

![normal](http://7q5cdt.com1.z0.glb.clouddn.com/blog-RBGScreenColor.png)

按住 `Ctrl`：

![press ctrl](http://7q5cdt.com1.z0.glb.clouddn.com/blog-hexSreenColor.png)

可以看到第一幅图中的 51, 51, 51 变成了 #333333。

---

### 配色

* [nipponcolors](http://nipponcolors.com/)

    日本的一个配色网站。罗列了很多不饱和经典的颜色，当然，自己选配还是很重要的。

    ![nipponcolors](http://7q5cdt.com1.z0.glb.clouddn.com/blog-chooseColor.png)

* [Adobe Color CC](https://color.adobe.com/zh/explore/most-popular/?time=all)

    Adobe 出的在线配色工具，里面有些现成的配色方案还是很不错的。

    ![Adobe Color CC](http://7q5cdt.com1.z0.glb.clouddn.com/blog-adobeColorCC.png)

* [paletton](http://paletton.com/)

    提供了各种预览模式，可以在模板网站中预览，在色块中预览。

    ![paletton](http://7q5cdt.com1.z0.glb.clouddn.com/blog-paletton.png)

---

### 图标

* [easyicon](http://www.easyicon.net/)

    对中文的搜索支持很好。实际上它是先把中文翻译为英文再搜索的。

    ![easyicon](http://7q5cdt.com1.z0.glb.clouddn.com/blog-icon.png)

* [Font-Awesome](http://fortawesome.github.io/Font-Awesome/icons/)

    比上面介绍的那个好用的多，字体图标，不需要考虑像素大小，全部是矢量图。并且图标精美。如果不使用 BootStrap，单独添加图标的话，这一套图标在合适不过了。

    ![Font-Awesome](http://7q5cdt.com1.z0.glb.clouddn.com/blog-font awesome.png)

* [iconfont.cn](http://www.iconfont.cn/)

    阿里巴巴制作的图标库。

    ![iconfont](http://7q5cdt.com1.z0.glb.clouddn.com/iconfont.png)

---

## 数据处理

### Json

* [json editor](http://braincast.nl/samples/jsoneditor/)

    将json数据输入进去，会生成一个树形的结构，方便查看每个节点。

    ![jsoneditor](http://7q5cdt.com1.z0.glb.clouddn.com/blog-json.png)

---

## 展示

### reveal.js

* [reveal.js](https://github.com/hakimel/reveal.js)

    在网页上展示 slides 幻灯片，太酷了。针对不会代码的人还有一个在线编辑器：[http://slides.com](http://slides.com)

    还有一个新手入门教程：[Reveal.js Tutorial-Reveal.js for Beginners](http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/)

    ![reveal](http://7q5cdt.com1.z0.glb.clouddn.com/blog-revealjs.png)

本文不定期更新。