GBin1专题之Web热点#1
Screenqueries
需要在不同的窗口viewport下测试你的网站吗？那你肯定需要尝试一下这个超棒的工具！甚至可以测试你的本地服务器，目前是Beta版本，不过相信它值得大家持续关注... ...
免费资源 - Freebies Gallery
Freebies Gallery是一个超棒的设计资源网站，这里你可以下载很多不错的UI设计，并且提供PSD和矢量源文件下载，如果你需要构建图形UI，肯定会让你大喊过瘾的...…
分享来自Zocial的72个超棒免费CSS3按钮
来自第三方的普通标准按钮，例如，facebook, Twitter的按钮尺寸大小和样式都不太相同。而且对于开发人员来说修改一个CSS的按钮相对更加轻松和愉悦。更重要的在于不同国家语言都可以方便的使用CSS按钮。
今天我们介绍的这套CSS按钮来自于Zocial，你无须使用其它的标签。所有的按钮都是可缩放并且可定制的。而且在老版本的浏览器上都可以很优雅的展现。当然对于IE6/7来说，不如图片的显示效果好。
按钮预览
主要的特性
- 100%的矢量CSS3图标
- 自定义字体文件和@font-face图标
- 按钮和图标带有版本支持
- 完整的尺寸缩放
- 主从按钮统一
- 可以很好的支持老版本浏览器
- GitHub repository (手写CSS)
- Sass framework (six buttons) (by @adamstac)
如何使用
导入zocial.css，然后使用如下代码即可：
<button class="zocial facebook">Sign in with Facebook</button>
你可以使用a，button，div来生成按钮。
如果需要显示图标，代码如下：
<a…
[JS代码] 使用javascript来互相转换画布canvas和图片image
使用javascript的drawImage方法可以方便的将图片image转换为画布canvas，如下：
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
同时也可以用以下代码来将画布canvas转化为图片image，如下：
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
了解javascript编程中的Prototype(原型)
当你定义javascript方法的时候，会产生一些预定义的属性，其中一个比较让人迷惑的属性就是prototype。在本文中，我们将详细介绍什么是Prototype，并且为什么使用prototype。
什么是prototype?
prototype属性初始时是一个空的对象，可以添加对象 ，你可以添加任何对象到它里面去。
var myObject = function(name){
this.name = name;
return this;
};
console.log(typeof myObject.prototype); // object
myObject.prototype.getName = function(){
return this.name;
};
在以上这段代码中，我们创建了一个方法，但是如果我们调用myObject()，将会返回window对象，因为它被定义在全局范围中。 this将会返回全局对象，因为没有被实例化。
console.log(myObject() === window); // true
秘密的连接
每一个javascript中的对象都有一个秘密属性。
在我们继续之前，我想讨论一下决定prototype工作方式的"秘密"连接。
每一个javascript对象在定义或者实例化的时候都会添加一个秘密的属性，叫__proto__，这决定了prototype链如何被访问。然而，在你的应用中访问这个__proto__属性绝对不是一个好主意，因为不是所有浏览器都可访问。
__prototype__属性在一个对象的prototype中不应该被弄混了，…
图标设计：教你如何有效地使用5个步骤设计漂亮图标
在今天这篇文章中，我们推荐来自adbuzeedo的这篇图标设计文章。在这篇文章中，作者使用5个步骤来设计超酷的图片，希望大家喜欢！
对于Icon设计来说，它要求很多设计技巧。设计者需要使用一个简单的符号在UI界面中展示行为，产品或者服务 。这里我们将展示一个设计图标的流程，并且提供我们免费给大家带来的图标设计。
步骤1：头脑风暴(brainstorming)
首先我们和设计师来讨论最合适的展示方式及其象征方式。只要我们选择了合适的构想，我们就开始下一个步骤。
步骤2：草图设计
我们通常使用3到5个铅笔素描来设计我们的图标构想。然后我们再讨论我们喜欢那一个图标。最后选择一个草图。
步骤3：Photoshop渲染制作
基于铅笔草图我们开始使用PS来渲染。然后我们创建主要形状并且继续制作细节。
步骤4：优化细节
在这个步骤中，我们将专注于材质和光线。对于图标设计来说，第一眼比较清楚是非常关键的。我们需要调整夸张效果来达到用户一眼就可以认出的效果。
步骤5：最后讨论和定稿
最后我们需要再见一次，然后看看是否图标是我们喜欢的。最后我们完成整个制作。
图标设计效果
via abduzeedo