推荐24款非常实用的CSS3工具
对于Web设计和开发人员来说，CSS是非常重要的一部分，随着越来越多的浏览器对CSS3的支持及不断完善，设计师和开发者们有了更多的选
择。如今，用纯CSS就可以实现各种各样很酷的效果，甚至是动画。今天这篇文章向大家推荐24款非常优秀的CSS3工具，为了获得更佳的效果，请在
Chrome 4+, Safari 4+, Firefox 3.6+, IE9+, Opera 10.5+版本浏览器中浏览如下资源和工具。
1.CSS3 Pie
使用CSS3 Pie可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等等。
2. CSS3 Click Chart
非常好的CSS3效果演示，提供了示例代码。
3.CSS3 Please!
非常帅的一款CSS3工具，可修改代码，即时预览。
4.CSS3 Button Maker
一个非常不错的CSS3按钮制作工具。
5.CSS3 Generator
非常不错的CSS3代码生成器，带预览效果。
6.CSS3 Menu
非常不错的CSS3菜单制作工具。
7.CSS3 Gradients
一款非常棒的CSS3渐变效果演示工具。
8.CSS3 Cheat Sheet
一份不错的CSS3属性速查手册（PDF格式）。
9.CSS3 Selector Test
非常不错的CSS3选择器测试工具
10.CSS3 Transforms
一款强大的CSS3旋转动画效果演示工具，即时生成代码。
11.CSS3 Preview
CSS3特性介绍及效果预览。
12.CSS3 Generator
一款非常不错的CSS3代码生成工具。
13.CSS3 Color Names
CSS3颜色命名对照表。
14.Toggle CSS3 Bookmarklet
CSS3书签工具。
15.CSS3 Border Radius
一款在线CSS3圆角工具，四个角输入值就能生成对应的效果和代码。
16.CSS3 Desk
很炫的CSS3桌面。
17.Web Browser CSS Support
非常详尽的浏览器对CSS支持情况，包括CSS2.1和CSS3。
18.Key CSS
让元素以键盘风格显示的样式表。
19.CSS3 Playground
一款在线CSS3圆角和阴影效果演示及代码生成工具。
20.CSS3 Wrapping Drop Shadows
CSS3包装阴影效果。
21.CSS3 Carve Me
模仿内阴影效果，可输入内容查看效果，中文也可以噢。
22.Mother Effing Text Shadows
这工具名字太奇怪了，一款文本阴影效果工具，可即时生成代码。
23.CSS3 Learning Tool
在线CSS3学习工具，可即时预览效果。
24.CSS3 Maker
最后压轴的这款工具非常强大，可在线演示渐变、阴影、旋转、动画等非常多的效果，并生成对应效果的代码，赶紧体验一下吧！
原文来自：CSS9.NET
55个美丽而独特的网站页眉设计欣赏
页眉在网页的最顶端，通常会放置网站Logo和导航，如今越来越多的网页设计师关注页眉的设计，依靠独特的设计手法，搭配上创意优秀的图片，让网页突破空间界限，给人留下深刻的印象。下面与大家分享一组美丽而独特的网站页眉设计案例，希望你能有所收获。
corvusart.com
octwelve.com
cosmicdiary.org
harmonyrepublic.com
mikedascola.com
toasteddigital.com
ryanscherf.net
eco-environments.co.uk
bluehatonline.com
ectomachine.com
aussiebbqlegends.com
inspiredology.com
blackmoondev.com
vunkyblog.net
yaronschoen.com
foxtie.com
vegasuncorked.com
mospromstroy.com
livingdesign.info
le28thiers.fr
alexandregomes.com.br
hotelrottnest.com.au
experiencialecom.com.br
chedonline.com
wpglamour.com
adaptd.com
dquinn.net
simpleart.com.ua
helmy-bern.cz
inchoo.net
hepppo.se
belighted.com
relogik.com
visitphilly.com
carlcartee.com
gapmedics.co.uk
lordlikely.com
feedstitch.com
foodtease.com
culinaryculture.com
showandtellsale.com
lionite.com
badhealth.nhs.uk
racket.net.au
undergrad.biola.edu
viget.com
versionsapp.com
acko.net
marchanddetrucs.com
pienternet.be
tnvacation.com
cheesetique.com
deborahcavenaugh.com
juandiegovelasco.com
joeychappel.com
原文来自：55 Awesome Website Headers For Your Inspiration
原文来自：CSS9.NET
免费的用户界面设计工具、工具包和资源
都是一些UI界面与设计使用的元素，软件，网站等。内容很丰富，适合网页设计师，用户体验设计师，界面设计师，产品设计师，JS前段开发，手机产品设计，ipad产品设计等使用
Lumzy是一个网站应用和原型界面制作工具。使用Lumzy，您可以轻松创建UI模型并即时发送到客户电脑中。 Lumzy还具有团队协作编辑工具。 
百舌鸟是一个在线工具，它使您轻松地创建UI界面模型，预览UI，并可以共享你的版面编排效果图。 
为设计图表和用户界面图形原型开发的一个自由和开源工具。 
Dojo提供了强大的性能并节省您的时间。这是适合经验丰富前端开发者的JS开发工具包。 
MockFlow是一个在线工具，用户界面设计和协作版面编排工具。 
Serena Prototype Composer是制作流程图，模拟程序流程和用户界面设计程序。 
Cocoo是一个用户友好的在线绘图工具，允许你创建一个如网站地图，线框，UML和网络图图等。 Cacoo可以免费使用。 
一个早期非正式的网站和用户界面设计工具 
网上应用线框 
User Interface Design Framework
一个免费提供网页设计师使用的用户界面设计工具。 
可以寻找一些设计资源与模式等。 
User Interface Design Patterns
提供一些热门的用户UI界面设计模式参考图，分类很详细，如果设计网站或UI界面可以上去找一些资源，很不错。 
Patternry是用户界面设计模式库的目的是帮助解决常见的接口设计问题。
UI设计界面资源欣赏参考网站。 
可以在线生成图表，只需要输入参数即可 
移动用户界面设计使用，可以输入参数进行测试，很方便 
可以自由设定Android操作系统的用户界面元素。 
该软件包含一些常用的Photoshop原文件和PNG文件，这些元素都是用来设计GUI界面的素材，通过该软件你可以快速制作出一些出色的界面 
网页布局元素大集合,PSD文件。 
iPad平板电脑上设计布局用的元素集合。 
原文来自：CSS9.NET
Web字体格式介绍及浏览器兼容性概览
目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现
方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，本文介绍主要的几种Web字体格式及各浏览器兼容情
况。
Web字体格式介绍
TrueType (.ttf)
Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT – Embedded Open Type (.eot)
嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中
@font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。
OpenType (.otf)
OpenType是一种可缩放字型（scalable
font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文
件扩展名为.otf，类型代码是OTTO，现行标准为OpenType
1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType
Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed
font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。
WOFF – Web Open Font Format (.woff)
相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web
而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType
等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不
包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF
的行列中来
SVG (Scalable Vector Graphics) Fonts (.svg)
顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable
Vector
Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语
法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命
令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。
字体格式转换工具
EOTFast
这个工具我刚用过，非常好用的一个工具，用于把TTF文件转为EOT格式。
Microsoft WEFT
微软提供的字体格式转换工具。
ttf2eot
可以转换TTF文件为EOT格式。
另外推荐几个在线的转换工具：
- http://ttf2eot.sebastiankippe.com
- http://www.cuvou.com/wizards/ttf2eot.cgi
- http://onlinefontconverter.com/
如果想把OTF文件转为TTF格式，可以使用FontForge来转换。
浏览器兼容性一览
使用CSS3的@font-face属性可以实现在网页中嵌入任意字体，但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字
体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体，浏览器对@font-face属性及各种字
体格式支持详的细情况如下：
| Browser | @font-face | TrueType | WOFF | EOT | SVG | SVGZ |
|---|---|---|---|---|---|---|
 |
4+ | 9+ | 9+ | 4+ | ||
 |
3.5+ | 3.5+ | 3.6+ | |||
 |
4+ | 4+ | 6+ | 4+ | 6+ | |
 |
3.1+ | 3.1+ | 6+ | 3.1+ | 3.1+ | |
 |
10+ | 10+ | 11.1+ | 10+ | 10+ |
原文来自：CSS9.NET
8个Web设计与开发的在线工具分享
在工作中借助一些非常好用的工具可以让你专注于更重要的事情，进而提高工作效率。本文收集了一些设计和开发相关的在线工具，分享给大家，希望对你有帮助。
ProCSSor
ProCSSor是一个很不错的CSS代码美化工具，它可以帮助你很轻松的把代码转换成很美观。 详细内容
学习HTML5的7个有用资源
虽然HTML5还是很新，没有被所有主要浏览器支持，但现在还是有许多设计师和开发人员使用。毫无疑问，几年下来，HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它，但也有许多人还没有接触过HTML5。为了帮助学习这个任务，我们收集了7个有用的HTML5学习资源。
这个文档举例说明了如何编写HTML5文档，为初学者提供了简单和可实践的应用程序，也为高级开发人员提供了更深度的信息。 详细内容
JavaScript Quiz: function Name
很困，差点都睡着了。看到工友发的一个推，玩了一下。求解。
function xx(){
//how to output function name:xx here?
}
======
好吧。无情的分割线，没人回答。我的解法是利用 arguments.callee.toString()
function fn(){
var fncode = arguments.callee.toString(), rnotation = fncode.indexOf('(');
alert(fncode.slice(9, rnotation));
}
但如果用(function())() 这样来执行。其实 IE 下获取到的和其他浏览器不同。结果就要 hack 了。如果用 fn() 来执行，那事实上我们知道 fn 这个名啦。 详细内容
JavaScript 散记：Tangram
好吧，为了新框架。学习吧。已经把内部的框架瞄完了。正好正在筹备下一版，趁年末这段时间，学习一下其他的框架，好在下次有机会参与构建的时候用上。Tangram 是百度前不久开源出来的框架，颗粒化比较细，注释也非常详尽，就先瞄瞄吧。下面是一些笔记。
目前这篇文章的状态是：【完结】
1. 文档模式判断
一般很少用。标准模式：document.compatMode === ‘CSS1Compat’。Quirks 模式对应的是 BackCompat。
2. 浏览器判断
采用主流的正则检测。利用正则 test() 执行后会存储的捕获组来匹配到的浏览器版本号，用 parseFloat 来得到最终的大版本号。IE8以上使用 document.documentMode 来获取正确的渲染模式版本号，其他 IE 版本和一般浏览器一样。Maxthon 则使用 try…catch 语句，用浏览器提供的 external.max_version 来获取。
更多的，可以参照 kissy 的 ua-extra.js 。 详细内容
JS 去空格的最佳实践: trim()
学习框架的我，又来了。看到 String 对象扩展这一部分，对 trim() 这个经常被来来说的方法比较感兴趣。刚好上次有同学提出疑问。刚好可以自测一下。先来看看老道在《JavaScript 精粹》P33 写的吧。他对 String 对象扩展了一个 trim() 方法：
Function.prototype.method = function(name, func) {
this.prototype[name] = func;
return this;
};
String.method('trim', function() {
return this.replace(/^\s+|\s+$/g, '');
});
熟悉吧，/^\s+|\s+$/g，这样的正则表达式。多少框架在用呢。比如 jQuery 的 trimLeft, trimRight：
// Used for trimming whitespace trimLeft = /^\s+/, trimRight = /\s+$/,
这是最佳实践么？但我们框架使用的不是这种方法(暂且称为半正则方法)。上次在其他产品组在内部 PK 的时候，说过，为什么我们框架要用下面这样的方法来实现 trim()，而不是用上面的那种。 详细内容
判断是否为数组的函数: isArray()
像 Ajaxian，StackOverflow 等，搜一下，到处都在讨论 isArray() 的实现。对于一切都是对象的 JavaScript 来说，确实有点麻烦。今天刚好在学习支付宝 JS 框架 base.js 。瞄了一下，实现是这样的：
if (value instanceof Array ||
(!(value instanceof Object) &&
(Object.prototype.toString.call((value)) == '[object Array]') ||
typeof value.length == 'number' &&
typeof value.splice != 'undefined' &&
typeof value.propertyIsEnumerable != 'undefined' &&
!value.propertyIsEnumerable('splice'))) {
return 'array';
}
怎么说呢，乱。当然，也可以说是，“史上最全”，它确实使用了最主流的方法，只是把他们都写一起了而已。 详细内容
