R控制绘图区域颜色

IE下CSS不兼容的一种解决方案

这个一个非常诡异的事情。我写了一个网站,AlternativeSplicingMiner,开发过程全部是在MAC上做的,于是没有注意到它在IE上的显示问题。后来到IE下一测试,许多问题都出来了。不能居中,margin总是比想象的大,position不能fix等等。怎么改写css都无解。后来,在生成的网页前加上了一句:

<!DOCTYPE html PUBLIC "-//W3C//DTD X[......]

Read more

用javascript结合HTML5画布(canvas)标签实现漂亮的两端对齐

我们知道使用css当中的text-align:justify就可以实现两端对齐了。比如下面这

<div style="text-align: justify; width: 300px">In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king's castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king's child went out to the forest and sat down by the fountain; and when she was bored she took a golden ball, and threw it up on high and caught it; and this ball was her favorite plaything.</div>

In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out to the forest and sat down by the fountain; and when she was bored she took a golden ball, and threw it up on high and caught it; and this ball was her favorite plaything.

我们知道,这种排版很类似Office Word的排版方式。如果有类似TEX的排版,对于这些非等宽字体,就会更好看了。Bram Stein就为我们用javascript实现了这样的功能。

比较我们可以发现,使用javascript的话,排版会更紧凑。其实它更强大之处还在于图文混排。当然那需要更强的图层控制能力。
[……]

Read more

颜色的意义

在不同的国家,不同的颜色会给人不同的感受。比如说对中国人来讲,红色是喜庆,幸运,等等。无论是摄影,还是设计,不同的色彩给人的不同心理感受也是从业者必须考虑的一件事情。但是要讲清楚不同文化背景下人们对色彩的感觉,的确是一件很难的事情。甚至就连我们自己文化内的色彩文化也很难清晰明了的表达出来。

下面这张图大约地以简明的方式提供给大家世界不同文化背景下代表国家或地区的人们对于颜色的认知,以色盘的方式,让人检索。

色彩与文化
色彩与文化

[……]

Read more

漂亮的CSS3按钮

上次介绍的荧光按钮其实是其于这一次的代码基础上加上了背景特效而已。那么一个漂亮的CSS3按钮应该如何实现呢?

其实很简单。首先确定按钮风格。CSS3的色彩模式为RGBA,RGB大家都很熟悉,A呢其实就是透明度。看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button, .button:visited {
	background: #222 url(overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}

然后确定按钮的大小。分成small, medium 和 large。

b001d2abf[……]

Read more