来自第三方的普通标准按钮，例如，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…

使用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)…

当你定义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对象，因为它被定义在全局范围中。…

设计行业是当前发展最快的行业之一，设计师需要了解最新的视觉设计趋势，及其类似jQuery，HTML5，CSS3的互动技术。在今天 这篇文章中，我想与大家分享这20个最新的CSS教程，大家可以参考里面的网页设计元素， 从中找到适合自己的内容。希望对大家都有所帮助！

Quickly Build a Swish Teaser Page With CSS3

How to Create a CSS3 Dropdown Menu [Tutorial]

Orman Clark's Vertical Navigation Menu: The CSS3 Version

Accordion with CSS3

Tutorial: CTA button without images using CSS3 and Entypo

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Pure CSS3 LavaLamp Menu

CSS3 signup…

在线演示1  在线演示2  本地下载

网站和web开发中我们常常需要处理类似标签添加功能的模块，以前我们也介绍过相关的jQuery插件 - textext，可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的jQuery插件来实现漂亮的标签处理功能，这里我们将使用以前的超酷留言板系统为基础来实现一个完整功能的留言发布系统，希望大家喜欢！

主要使用插件

• jQuery UI - 需要使用到autocomplete功能
  
• jQuery tag handler
• 其它插件请参考文章: 使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

注意：jQuery UI的autocomplete在Firefox下处理中文自动补齐功能有个bug，你需要自己解决，解决方法如下：

找到jQueryUI中的如下代码：

           …

在线演示  本地下载

是不是也考虑生成一个矢量类型的地图？今天我们将介绍的这款jQuery插件 - JQVMAP 可以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG（Scalable Vector Graphics）技术生成地图图片，如果你也需要支持老版本的浏览器，例如，IE6/7/8的话，它也可以通过VML来实现，非常不错的jQuery插件，相信大家一定会喜欢！

主要特性

• 支持现代浏览器，同时对于老版本浏览器也可以通过其它fallback方式支持
• 支持缩放，拖动查看
• 提供丰富的地图生成参数
• 目前支持：世界地图，美国地图，欧洲，德国地图
• 你可以自己定义自己的地图（当然，这个过程比较繁琐）
• 实时更新地图
• 需要jQuery类库支持
• 完整清晰的文档说明

如何使用

JQVAMP使用非常简单，导入jQuery类库和插件类库，如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"…

今天我们介绍一个非常不错的用来查看不同浏览器下CSS属性兼容性的在线工具 - Browser Support，如果你需要查看不同浏览器下CSS的兼容性的话，这个工具肯定能帮你大忙，特别如果你想在你的项目中使用CSS3的话，这个工具肯定也是你不错的选择。

使用这个工具，你可以输入需要查询的属性，当然这个工具拥有自动补齐功能，使你可以更方便的查看不同的CSS属性。

搜索结果会按不同的浏览器来展示兼容属性。

是不是很方便？希望大家在web开发中能够用到这个在线工具。

本文收集了最新的jQuery社区发布的jQuery插件，绝对是你没有见过的，希望大家喜欢！

1. SearchMeme

一个即时搜索的jQuery插件

2. Wookmark

一个用来创建动态，多列布局的jQuery插件。帮助你在动态列中布局一系列的元素。

3. Intelligist

使用GitHub gists来在页面中分享和演示代码的jQuery插件。

4. Backstretch

一个简单的允许你添加动态变化大小背景图片到任何页面的jQuery插件

5. CraftMap (previous MobilyMap)

一个轻量级的(6kb)，完全可配置的jQuery插件，通过覆盖元素可以将简单图片转换成一个功能性的地图。

6. jQuery NailThumb

帮助你方便的创建图片的缩略图，而不使得图片变形。

7. bgStretcher

一个帮助你添加大图片到web页面作为背景的jQuery插件

8. Adipoli

一个简单帮助你生成图片悬浮特效的jQuery插件。拥有大量的选项，特效等等。

…