2011年10月

响应式的设计和开发思路让页面更加“弹性”。

响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式Web设计的概念:

Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”,文中援引了响应式建筑设计的概念:

最近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产“智能玻璃”:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。

将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。

显然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。

为网而生详细翻译了什么是响应式Web设计?怎样进行?

重复的线性渐变

替代线性渐变,你可以使用重复的线性渐变:标注色标值,然后无间断地重复它们。用百分比的话就没有太大的意义,但用像素或者其他单位的,它可以实现非常酷的效果。例如:

background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

渐变以明亮的纯红色开始,在20像素的位置之后渐变为深红,随后在40像素的位置渐变回纯红色。这是一个重复的渐变,它会重复这个图案到块的结束。像Figure6所示

Figure6.pngFigure 6: A repeating gradient example.

最后感谢 Jessica 同学。

更多复杂的例子 ↓

- 阅读剩余部分 -

透明渐变

一个很酷的技术,在渐变中改变颜色的alpha通道的值,例如:

background-image: -o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));

我们用RGBA,在渐变开始时alpha值是1,在渐变结束时alpha值是0.5。我没有使用红、绿、蓝三个色值,但我却完成一个很棒的效果,如Figure5如示

Figure5.pngFigure 5: Varying transparency along a gradient to give a cool semi-seethrough effect.

继续浏览重复的线性渐变

CSS3 线性渐变-色标

渐变可以指定位置做色标标明特别的颜色。在一个渐变里你可以指定许多色标只要你喜欢,浏览器会计算出这些色标间的所有颜色。一起看一个例子,从top left到bottom right渐变,从亮红色到暗红色

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(150,0,0));

等同于下面的写法:

background-image: -o-linear-gradient(top left,rgb(255,0,0) 0%,rgb(150,0,0) 100%);

在这个渐变块,我们一个色标在0%处,一个在100%处。但是你没看到一个坐标值,是因为它是默认的。反而,在开始和结束添加色标是非常有用的。例如:

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));

这边我们从一个亮红色,50%深红色,75%再深一点的深红色,最后一个稍微亮的深红色。如Figure 3所示

Figure3.pngFigure 3: A linear CSS gradient with multiple colour stops.

百分比的方式,是一种非常万能的做法,它将为你展示CSS渐变是多么地灵活多变。即便渐变是应用在一个改变宽度,高度当浏览器窗口重置大小时的不固定的布局里,它也总是适用的。

当然你也可以用像素代替百分比,例如:

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 100px,rgb(50,0,0) 200px,rgb(150,0,0));

这意味着色标总是标在从渐变开始的100像素和200像素,不管浏览器窗口重置大小。如果你想,你可以改变色标的开始和结束的位置——它们不必要在块的开始和结束位置。在这种情况下,在色标开始前是一个固定的颜色,在色标结束后是一个固定的颜色。例如:

background-image: -o-linear-gradient(360deg,rgb(100,100,100) 50% ,rgb(200,200,200) 75%);

你会得到Figure4结果

Figure4.pngFigure 4: Moving the start and end colour stops.

继续浏览透明渐变

CSS3 线性渐变-不同渐变角度

在第一个例子里,我们没特别指定方向或角度,渐变方向默认是至上而下。相当于这样子写:

background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));

角度值放在渐变信息里开始处,用颜色用逗号隔开。你可以通过改变这些关键字来指定渐变方向从top,bottom,left或者right。

figure2.pngFigure 2: altering the angle keyword between top, bottom, left, and right, respectively.

你也可以改变top left, top right, bottom left 和 bottom right,实现对角渐变。

另一方式就是设定角度值,例如

0度等于left

90度等于bottom

180度等于right

270度等于top

360度等于left

上述让你清楚地知道角度值的工作原理。试着去玩玩,看看你所实现出来的渐变。

继续浏览CSS3 线性渐变-色标

最近回复

  • unicac: 很久没打理了。。。
  • kuye: 你的博客做得也不错(...
  • unicac: 哈哈,是咯!
  • 柠檬园主: 还在更新的独立博客,...
  • 18通讯网: 虽然过程很辛苦,但你...
  • fenny: 这个尴尬的年龄,谈爱...

分类