ColorZilla取色工具的安装使用.docVIP

ColorZilla取色工具 本教程出自酱油到此游Blog ColorZilla介绍 当HTMLer在浏览网站时，发现网站上的一些背景图片颜色很好看，希望能用到自己的网站中，却焦急于不知道具体的颜色代码值。现在介绍一款由老外开发的火狐浏览器取色插件ColorZilla。它不仅能取色，还能配色，直接将配色代码拷贝，然后粘贴到你的网站代码中。 在ColorZilla2.8版本中，它还有个很诱人的功能，就是CSS Gradient Generator——css渐变代码生成，能够兼容所有的浏览器。 二、ColorZilla的安装 ColorZilla插件下载地址： /en-US/firefox/addon/colorzilla/ 当然你也可以打开火狐浏览器，点击工具出现下拉菜单，选择附加组件，在右上角搜索框中输入ColorZilla，就会跳转到最新的ColorZilla下载页面。 下载完成后，它是一个XPI格式的文件。注意，它是不能直接安装的，你只需要把这个安装文件拖到打开的火狐浏览器窗口里就行了，会自动提示安装组件的。 三、ColorZilla的使用 安装完后，点击工具，向下能找到安装好的ColorZilla插件，如下图： 可以看到ColorZilla有5个功能。 颜色选择器 点击颜色选择器后，出现一个类似调色盘的窗口，这里是让你调色的，可以将颜色的代码值拷贝并粘贴到网页代码中去。似乎这个功能不是我们需要的，如下图： 鼠标点选器 点击鼠标点选器后，出现一个黑色的数值条，鼠标指针变成十字形，将其移动到当前网页任何有颜色的地方，显示条上会出现对应颜色和颜色的代码值，恩很好，当我们发现自己喜欢的颜色时，选择这个功能，就能立马得到所想要的颜色RGB值或者十六进制值了。So easy！ Palette Browser… 点击这个功能后，其实是跟颜色选择器一样的功能。 Css gradient generator 这个功能很强大，能够将颜色进行渐变，而且还能生成对应的能够兼容所有浏览器的css代码。堪比ps，HTMLer再也不需要到ps中画渐变图啦！省时省力。使用方法很简单，只要选择好自己喜欢的渐变的颜色就行，基本跟ps的渐变用法一致，最后在右下角会生成css代码，直接拷贝粘贴到自己的CSS文件中就可以啦！ Webpage Dom color analyzer… 这个功能其实就是分析并计算当前整个网页中所有用到的颜色及颜色代码值的集合，结果会出现在当前网页底部的控制台中。这个功能很直观的观察整个网页的颜色布局，对于如何配色提供参考。当鼠标移动到颜色块上时，对应的使用该颜色的元素在当前网页中会被虚线框动态的标识出来，很清楚的看到网页中哪些元素用到了整个颜色。 酱油到此游Blog原创