所有由Jace发布的文章

今天的许多Web应用都将残疾人士排除在外，因为目前的技术在传达重要信息方面能力不足。富互联网应用（RIA）通常使用多种技术，如 HTML，CSS和javascript，但往往不能提供足够的语义，因此，web应用对残疾人士难以使用，或者完全不能访问。继续阅读WAI-ARIA实时区域（ Live Regions） →

页面布局

负值之美：负值在页面布局中的应用

2010/10/04 Jace 7条评论

负数给人总是一种消极、否定、拒绝之感，不过生活中看到负数也会有惊喜之感，那就是看到银行给你邮寄的信用卡账单，本月的应付账款为负值时，且负值越大越好。好了，闲言碎语莫要讲，今天就表一表负值在页面布局中的应用。

1.负边距+定位：水平垂直居中

使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，已到达水平垂直居中的效果。

.content{
	width:550px;
	height:400px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-275px;
	margin-top:-210px;
	border:1px dashed #333;
	background:#eee;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:10px;
}

点击demo 继续阅读负值之美：负值在页面布局中的应用 →

css

box-sizing轻松更改盒模型大小计算方式

2010/08/24 Jace 发表回复

注：请在标准浏览器下查看。

标准浏览器未设置-moz-box-sizing属性时的默认布局

width: 160px; border: 10px solid rgb(255, 0, 0); padding: 5px; height: 200px;

标准浏览设置box-sizing:content-box时的布局

width: 160px; border: 10px solid rgb(255, 0, 0); padding: 5px; height: 200px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box; box-sizing:content-box;

标准浏览设置box-sizing:border-box时的布局

width: 160px; border: 10px solid rgb(255, 0, 0); padding: 5px; height: 200px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; box-sizing:border-box;

css

CSS3制作多角星

2010/08/20 Jace 发表回复

原文：CSS3 Starbursts

http://matthewjamestaylor.com/blog/css3-starbursts

最近我体验了下css3的rotation（旋转）属性，发现可以用来制作多角星而且不用使用图片。我们所需要的只是一些嵌套的块级元素，通过为它们设置不同的旋转角度来实现。通过设置rotation可以将盒子的角（corner）沿着星星的圆周分布。

首先，我创建了一个16角星，通过使用三个包含在a标签内的嵌套的span元素实现，效果如下图所示：

上面的星星效果只能在支持CSS3 rotation属性的浏览器下看到，目前有safari，Firefox和Google chrome。其他浏览器下就被优雅降级为一个普通的黄色方块。我把在safari下的效果截图贴上，以便于你可以看到在现代浏览器下的效果。继续阅读CSS3制作多角星 →

信息构建

Image Optimization for the Web at php|works

2010/07/30 Jace 1条评论

信息构建

标签(Tags)可视化呈现

2010/07/27 Jace 发表回复

标签被人们广泛应用到分类和组织网络内容如书签、博文或照片。标签是类似于形式自由的关键词，被用来作为元数据添加到资源对象上。在多数标签系统中，一个资源对象可被添加一个或多个关键词，这导致了资源对象被分配到多个类目下。比如，一个站点可能被贴上“博客”、“可视化”和“设计”。随着越来越多的资源对象被添加标签，标签索引的数量越来越大，也变得更复杂。如何高效地在海量标签中查找到符合自身需要的资源成为人们关注的普遍问题，适当的标签索引展现形式能够帮助用户检索和浏览资源集。

可视化是一种很有前景的方法。过去的可视化技术用来展示具有层次结构的关键词或类别。标签索引的一个显著特征就是非层次机构、平面的。HubBlog尝试将del.icio.us标签用复杂的网络图表示，而这种网络图却难以理解。

继续阅读标签(Tags)可视化呈现 →

进步博客

所有由Jace发布的文章

LESS:环境搭建及安装

制作无障碍的星型评级控件

读屏软件NVDA测试：图片alt、title属性

WAI-ARIA实时区域（ Live Regions）

摘要

目录

无障碍富互联网应用