1. Tiny Fluid Grid

2. ZURB CSS Grid Builder

3. Grid System Generator

4. Variable Grid System

5. inuit Grid Builder

6. 1200px Grid System

7. Negative Grid 1kb Fluid CSS Grid

8. YAML

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

9. Construct Your CSS

10. gridr buildrrr

11. Gridinator

12. Grid Calculator

13. Grid Generator

14. YUI CSS Builder

本文链接：推荐14个非常有用的 CSS 网格系统生成工具

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

demo：http://www.css88.com/demo/css3-progress-bars/

英文原文：http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码： HTML代码比较简单

1. .progress-bar – 定义进度栏的常规样式。
2. .blue – 定义进度条的风格，这里是蓝色的
3. .stripes – 当前进度的动画类型。
4. span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

添加颜色，进度条风格：

条纹样式

闪烁样式：

发光样式：

在不支持css3的浏览器下的表现：

demo:http://www.css88.com/demo/css3-progress-bars/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发 转载请注明转自《时尚的CSS3进度条》

1. Less Framework 4

2. Golden Grid System

3. CSSgrid

4. Get Skeleton

5. inuit CSS

6. Fluid Base Line Grid

7. 978.gs

8. BluCSS

9. Columnal

10. 960.gs

11. hashGrid

12. Fluid 960gs

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

13. Blue Trip CSS Framework

14. 1kb Grid

15. Fluid Grid

16. Blueprint CSS

17. 52 Framework

18. Sampson Videos

19. Not Just a Grid

20. Baseline CSS

英文链接：20 Useful CSS Grid Systems for Web Designer

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

实现布局有三个思路:

1. 最传统的思路,多弄几个容器,分几列,然后往每个列里面插入元素.其实用table分几列实现更加方便:P;
2. 使用html5中css3的多列布局来实现.参见w3c标准中的css3多列布局模块;
3. 使用绝对布局,通过javascript生成元素的布局位置.

前两种方法在网上都有比较详细的介绍,我这里就不再多说了,这里主要说一下我做的第三种实现的优缺点以及我的实现思路.

第三种方案是所有的要布局的元素都是绝对定位的,然后通过javascript来判断每个元素位置,动态设置位置实现布局.

缺点

需要使用javascript来遍历元素,然后要根据前一个元素来判断后一个元素的位置,这样可能对一些老版本的浏览器造成负担,特别是IE6这种 老古董,而且在javascript失效的时候,整个页面的布局都会乱掉.另外如果整个页面宽度是变化的,则可能每次窗口尺寸改变时都要重新计算所有元素 的位置,在页面中元素较多的时候可能会有闪烁的现象.另外如果页面中出现图片,则需要实现定义好图片的尺寸,否则会出现无法正确计算元素位置的情况.

优点

布局更加灵活,元素绝对定位,可以使用javascript灵活操作.页面宽度改变时可以重新布局整个页面.可以使页面的中的元素真正流动起来,让新添加的元素插入到高度最低的列,使页面的低端更加整齐,对插入的元素高地要求较低.可以较为方便的实现延迟加载.

具体实现

最开始我实现的时候是通过使用javascript生成虚拟的列,根据元素的顺序为每个元素分配一个列和行,然后计算每个元素的位置,举个例子,现在假设有四个列:

使其在页面中布局.事实上这个解决办法跟第一种和第二种是一个道理的.最后页面每列的高度差别可能会很大.

//getElements()方法用于获取页面中的元素
var items = getElements();
var columnCount = 4;
var columnWidth = 230;
var padding = 8;
//遍历所有元素
for(var i = 0, len = items.length; i < len; i++){
	//获取当前的元素
	var currentItem = items[i];
	//获取当前对象的列
	var currentColumn = (i + 1) % 4;
	//获取当前对象的行
	var currentLevel = parseInt(i / 4);

	//有了当前的行跟列可以根据上一层的对象计算出当前对象的高度
	var left = currentColumn * columnWidth;
	var top = items[i - 4] ? 0 : items[i - 4].style.top + items[i - 4].clientHeight + padding;
	//设置当前的位置
	currentItem.style.top = top + 'px';
	currentItem.style.left = left + 'px';
}

代码和逻辑都比较简单,根据当前的行跟列计算出位置就行了.但是这个逻辑还是会出现元素高地差距过大的情况.看一下新浪weibo的广场图片效果:

可以看到越到最后可能列高度之间的差距会越大.这不是我们想要实现的效果.

所以我这里换了一个思路,虚拟的列还是要有的,但是行的概念我们抛弃掉,我采用的是一个类似流动的概念,新插入的元素是根据每个列的高度,那个高度 最低就流向哪个列,最后确保每个列的高度都趋近一致,实现我们想要的效果.当然我们可以采取获取所有元素的高度,然后统一计算一下,获取一个最佳的排列方 法,但是这会给浏览器带来较大的计算量,而且如果不断的加载更多的图片我们会得不偿失,所以我们采用的是一个流动的模型,只让当前对象寻找最低的高度然后 插入.

这里我实现了一个Column对象,一个ImgItem对象.Column对象用于维护每一列的信息,包括列的最到高度列宽度等列信息.ImgItem对象保存了一个html节点对象,还有一些设置元素位置,获取当前元素位置的方法.

下面是Column对象的代码:

var Column = function(order){
	this.order = order;
	this.maxHeight = 0;
	this.columnWidth = 230;
	this.left = this.columnWidth * order;
	this.lastItem = null;
	this.positioned = false;
	this.setReferItem = function(item){
		this.lastItem = item;
	}

	this.getHeight = function(){
		if(this.lastItem){
			this.maxHeight = this.lastItem.getBottom();
		}
		return this.maxHeight;
	}

	this.getLeft = function(){
		return this.left;
	}
};

ImgItem对象的代码:

var ImgItem = function(referNode, column){
	this.referNode = referNode;
	this.bottom = -1;
	this.positioned = false;
};

ImgItem.prototype = {
	/*
	 *set the refer node's top
	 * @param value: Number
	 */
	setTop: function(value){
		this.referNode.style.top = value + 'px';
	},
	/*
	 *set the refer node's left
	 * @param value: Number
	 */
	setLeft: function(value){
		this.referNode.style.left = value + 'px';
	},
	/*
	 *get the refer node bottom position
	 */
	getBottom: function(){
		if(this.positioned){
			if(this.bottom < 0){
				this.bottom = parseInt(this.referNode.style.top) + this.referNode.clientHeight;
			}
			return this.bottom;
		}else{
			throw("current node has not been positioned!");
		}
	},
	setPosition: function(column){
		this.positioned = true;
		this.setLeft(column.getLeft());
		this.setTop(column.getHeight() + 10);
		column.setReferItem(this);
	}
};

基础打好了,下面要做的就是给元素进行布局了:

//首先根据配置信息中的列数初始化列
for(var i = 0, len = this.config.columnCount; i < len; i++){
	this.columns.push(new Column(i));
}
//获取页面上已存在的对象
var liItems = document.getElementById('img_list').getElementsByTagName('li');
//将所有的对象进行布局
for(i = 0, len = liItems.length; i < len; i++){
	this.addNewItem(liItems[i]);
}

好吧这里还用到了一个addNewItem方法:

getMinHeightColumn: function(){
	var minHeight = -1, tempColumn = null;
	//遍历所有的列,获取当前高度最低的列,并返回
	for(var i = 0,len = this.columns.length; i < len; i++){ 		if(minHeight > this.columns[i].getHeight() || minHeight == -1){
			minHeight = this.columns[i].getHeight();
			tempColumn = this.columns[i];
		}
	}

	return tempColumn;
},

getMaxHeight: function(){
	var maxHeight = -1;
	//遍历列对象,获取高度最高的列并返回高度
	for(var i = 0, len = this.columns.length; i < len; i++){
		if(maxHeight < this.columns[i].getHeight()){
			maxHeight = this.columns[i].getHeight();
		}
	}

	return maxHeight;
},
addNewItem: function(liItem){
	//设置元素的位置
	var imgItem = new ImgItem(liItem);
	imgItem.setPosition(this.getMinHeightColumn());
	this.cachedItems.push();
	//设置容器的高度
	document.getElementById('img_list').style.height = this.getMaxHeight() + 'px';
}

基本的布局逻辑已经都齐了,还有的就是lazyload的一些逻辑了,这些逻辑都比较通用.加载后布局对象的逻辑是相同的.这里就不再赘述了.

点击下载源文件

原文：http://www.z-index.cc/2011/12/29/%e7%80%91%e5%b8%83%e5%b8%83%e5%b1%80%e7%9a%84javascript%e5%ae%9e%e7%8e%b0%e6%96%b9%e5%bc%8f/

CSS3 Clock With jQuery

Another Image Gallery

Sliding Vinyl

3D Cube That Rotates Using Arrow Keys

Multiple 3D Cubes (Slide In/Out)

CSS3 Accordion

Auto-Scrolling Parallax

Isocube

Image Gallery

Matrix

7 Javascript-effect Alternatives Using CSS3

Image Hover Effects

Turning Coke Can (Control With Scrollbar)

3D Meninas

Polaroid Gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

Mac Dock

Drop-In Modals

Zooming Polaroids

Animated Rocket

Poster Circle

Morphing Cubes

Analogue Clock

Falling Leaves

Animated Polaroid Gallery

Spotlight Cast Shadow

Colorful Clock

Lightbox Gallery (Draggable)

Elastic Thumbnail Menu

Coverflow

Snowflakes

jQuery DJ Hero

Dynamic Stacking Cards

Snow Stack (Control With Arrow Keys)

Animated Pricing Column

Slick jQuery Menu

CSS3

CSS Tabs Without Javascript

Tab Menus Without Javascript

SVG Fisheye Menu

Dynamic Presentation Without Flash

Rotating Gallery

Dropdown Menu

Frame-by-Frame Animation (Hover to Play)

Another Accordion

AT-AT Walker (No Flash or Javascript)

Another Fisheye

英文链接：47 Amazing CSS3 Animation Demos

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

在差不多 2 年前，我刚来到支付宝的时候，师傅让我看一个杂乱的有 6000 行、100k+ 的 CSS 文件，体积不是问题，问题在于对于这个文件无从下手。谁都不敢改，更没有规律让你去优化。当时我的想法是，做一个让大家用起来更方便的方案。包括代码+文档，而后来他还包含了一个兼容解决方案库，最终还增加了编辑器插件。一年后，Alice 出来了。经过 1 年的探索和应用。新的样式方案已经全面应用在支付宝 2011年12月15号发布的新版上，并应用于支付宝大大小小的各个项目中，接受各种考验。今天 Alice 将作为一个圣诞礼物。对外开放：

• Github 仓库：https://github.com/sofish/Alice
• 官方展示网站：http://aliceui.com

我想，发布一个开源的项目并仅仅是 PO 出代码让大家查看/使用/评论，而更多的是一份责任。我们希望发布代码，帮助有需要的人；也将收集反馈，不断改进这个产品，以便于使用的人能跟项目一样成长起来。我不知道是否能真正帮助到，但我相信可以。至少在支付宝，我觉得 Alice 已经改变了大家应用 CSS 的基本，这个基本是，代码必须是有注释的、命名规范统一的、模块化的，并且能抽象供重用的。

采用 MIT License 许可。属于开源协议中开放权限最好的协议之一。基本上只要署名即可用，详情可以见 Alice License。我们基于“分享·贡献·学习”的理念建立 Alice 网站，开源部分团队成果。欢迎参与 Alice 的开发，或提出你宝贵的意见。

了解这个开源程序。可以看看我们官方网站上的介绍，而快速开始，你可以通过下面几个链接来到达核心的内容：

1. Alice 入门指南

如何快速开始，了解和使用 Alice 提升团队合作的效率。

2. 成为作者/贡献者

成为一个代码贡献者、插件作者，或者 fork 一个自己的分支吧，让你的简历多一份可写的内容

3. Alice 样式库解决方案

如果我们风格统一，那么代码将是有规可循的。我们可以根据命名了解结构，根据结构理解构建的代码原理。对于跨产品合作，将是无缝的；对于多人 debug 也将是无碍的。样式解决方案正在为这样的目标努力。现在她已经应用于支付宝的各条产品线。

4. 阅读 HTML5/CSS3 标准文档

标准化文档项（Standard Specs），目前主要是对 HTML5/CSS3 这些较新的标准技术进行的标准文档研究。使用于标准布道。让更多不熟悉相关技术的人可以阅读更易懂的文档、了解需要注意的点和知悉相关的解决方案。后续计 划是产出网站应用新技术的渐进增强方案和实践解决方案。

相信你和我一样很好奇结合 HTML5 和 CSS3 来制作网站会有什么样的效果，下面向大家分享的免费网站模板会告诉你，看到喜欢的就赶紧下载吧。记得分享和推荐一下哦

21. VividPhoto

免费下载 | 在线演示

22. Shinra

免费下载 | 在线演示

23. Restaurant

免费下载 | 在线演示

24. Lifebook

免费下载 | 在线演示

25. ElegantPress

免费下载 | 在线演示

26. SocialStream

免费下载 | 在线演示

27. OnlineSolutions

免费下载 | 在线演示

28. Touch The Future

免费下载 | 在线演示

29. FreshIdeas

免费下载 | 在线演示

30. One Page Portfolio

免费下载 | 在线演示

31. HTML5 Admin Template

免费下载 | 在线演示

32. HTML5 Admin

免费下载 | 在线演示

33. 52framework

免费下载 | 在线演示

34. One-Page Template

免费下载 | 在线演示

35. ArchiteXture

免费下载 | 在线演示

36. PKE Meter

免费下载 | 在线演示

37. HTML5 Starter Pack

免费下载

38. HTML5 template

免费下载 | 在线演示

39. Nova

免费下载 | 在线演示

40. Kroft

免费下载 | 在线演示

原文：http://www.cnblogs.com/lhb25/archive/2011/12/14/beautiful-free-html5-css3-templates-two.html

相信你和我一样很好奇结合 HTML5 和 CSS3 来制作网站会有什么样的效果，下面向大家分享的免费网站模板会告诉你，看到喜欢的就赶紧下载吧。记得分享和推荐一下哦

1. Memoir

免费下载 | 在线演示

2. HTML5 Theme

免费下载 | 在线演示

3. DesignStudio

免费下载 | 在线演示

4. SilverBlog

免费下载 | 在线演示

5. Clean Red

免费下载 | 在线演示

6. CoffeeCols

免费下载 | 在线演示

7. Design Company Website

免费下载

8. Minimalism

免费下载 | 在线演示

9. Serenity

免费下载 | 在线演示

10. Vibrant Professional Web Design

免费下载

11. DaFrontPage

免费下载 | 在线演示

12. High Five

免费下载 | 在线演示

13. Business Project

免费下载 | 在线演示

14. Single-Page Portfolio

免费下载 | 在线演示

15. Studio One

免费下载 | 在线演示

16. OWMX-1

免费下载

17. Simple Style 7

免费下载 | 在线演示

18. Night Club

免费下载 | 在线演示

19. Small Business

免费下载 | 在线演示

20. Cooking Site

免费下载 | 在线演示

英文链接：40 Beautiful Free HTML5 & CSS3 Templates

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

1. CSS Design Awards

2. Awwwards

3. Webcreme

4. Best Web Gallery

5. Unmatched Style

6. The Design Inspiration

7. Css-Showcase

8. Css Cake

9. CSS Winner

10. Moluv

11. 101 Best Websites

12. Dzine Mart

13. Site Inspire

14. Css Mania

15. CSS Remix

16. Design Shack

17. Design Flavr

18. Design Snack

19. CSS Hunt

20. Css Drive

21. Css Elite

22. CSS Daddy

23. Divine CSS

24. CSS luxury

25. Browser Shots

26. CSS Heaven

本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢？

有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3我们能做些什么。

什么是HTML5和CSS3

HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了，为什么我们要单独使用CSS呢，HTML不是一样可以控制Web页面的显示效果么？为了回答这个问题，我举个简单的例子：

有没有发现如果一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息？页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。

HTML5和CSS3是HTML和CSS的最新版本，它们目前均未确定标准，但是已经公布的新特征已经让我们心动不已。

HTML 5的新特新

1. 新的内容标签

HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。

2. 更好的表格体系

现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。

3. 音频、视频API

HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。

4. 画布(Canvas) API

在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。

5. 地理(Geolocation) API

HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息；同时用户也可以选择是否关闭这个功能。

6. 网页存储(Web storage) API

HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。

7. 拖拽释放(Drag and drop) API

我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。

CSS3 新特性

1. RGBa

CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。

2. Multi-column layout

CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。

3. Round corners

圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。

4. @font-face

当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。

5. 其他特性

此外，CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。

利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也可以被搜索引擎检索到。

HTML5和CSS3的兼容性

HTML5和CSS3的标准并未正式完成，各家浏览器对其支持程度也不尽相同。了解HTML5和CSS3的兼容性是十分必要的。下面的连接是一个专门跟踪HTML5和CSS3兼容性的网站，有兴趣的朋友可以点击查看：

http://www.findmebyip.com/litmus

一些你可能感兴趣的资源

http://www.apple.com/HTML5/showcase/
http://html5watch.tumblr.com/
http://w3school.com.cn/index.html
http://www.mhtml5.com/
http://html5demos.com/
http://www.sencha.com/