网页设计

两栏自适应带头尾

回想起刚刚工作的时候,作为一个一入HTML/CSS的门就跟着CSS设计风格走的人,各种经验其实还不是很丰富,想要说服公司里的那群Table党,其实并不是什么容易的事情。尤其是当他们举出一些对table布局来说很轻松的case时,我却拿不出应对的方案。其中有两个让我纠结很久的问题,一是自适应页脚(当页面不足一屏高时显示在屏幕下,当页面超过一屏高时跟在内容后面),另一种是自适应宽度的多栏布局。

后来渐渐的,经验开始丰富起来,也离开了之前的单位,新的单位中从零开始的设计变少了,更多的是维护工作,也就渐渐地把网页设计的基本功给淡忘了。最近因为朋友买了域名开始着手设计个人网站,我才突然有性质再捡起一些无意间丢掉的东西来。

首先想到的就是上文提到的两种情况,当时经验浅薄,也没什么见识,这件事情会着实困扰到我。而最近我在Github上抄袭设计(做我那个RewindBug)时,留意到了Github的页脚设计。放到自己提炼的简单情况下来,稍微做了些修改,得出了一个让我还觉得的结果。至少,这个布局结构比我预想的还要健壮一些,除了为了保险起见加的clearfix外没有使用任何hack代码,同时包括了自适应两栏和自适应页脚,居然能在最低IE6下很好地工作……

[pyg l=”html” s=”autumn” tabwidth=”2″ linenos=”table”]





something here

something here.



[/pyg]

网页设计审美反思

踏入Web设计师这一行,不知不觉已经有3年时间了。

因为最先接触的启蒙书籍便是Andy Clarke大师的《超越CSS》,以及享誉设计界的《CSS禅意花园》,因此我在Web设计的审美方面,一直是偏向于欧美式的。并且,国内一些老旧的、陈腐的设计与编码,更是加深了我学习前卫Web标准设计的决心。

长久以来我一直以为这种纯欧美式的设计风格,就是我最喜欢的。但是,当我数次更换了我个人博客的主题之后,今天我决定静下心来认真反思这个问题。反思自己的Web设计审美观。

最初的时候,我使用的是WordPress自带的Classic主题,只是自己稍稍修改了一些颜色,该主题的设计者就是《CSS禅意花园》的主要作者之一的Dave Shea。随后我又从WordPress的官方主题库中寻找了一番,选中了BytesForAll的一款Atahualpa主题。这是一款非常简练的主题,除了Logo、搜索、RSS按钮,还有一幅宽大的banner,再无任何图片元素。各个板块之间只是用虚线分割,浅浅的、淡雅的灰色虚线,它表现出的正是整个主题的核心。我在这款主题的基础上做了一些字体、字号、颜色还有图片的优化,让它对中文字体的适应性更好,然后使用了很久。

但是经过一段时间之后,我开始觉得这款主题并不能很好地代表我的审美观,首先它实在太过简单了,我希望的界面风格是要简约+华美,简约和华美并不冲突,既然天底下能有上海政府网这种又繁乱又丑陋的设计,就可以有既简约又华美的设计,只不过非常困难就是了。其次,中文Web设计永远的痛——中文字体,那些基于英文的主题上变换自在的字体与字号,直接拿过来换成中文就只有丑陋两字可以形容,因为不经字体平滑处理的中文没有任何一种字体能够放大到30多px却保持平滑。第三点则是,这种过于简洁的风格无法表达出我想要的一种温馨的、富有情感的效果。

最后,我选中了崔凯先生过去的作品Sunshine,尽管这个主题相比jQ等国外主题,看起来好像很平庸,似乎和国内常见的页面设计风格并无太大的区别,然而这配色与配图却让我产生了些许共鸣。崔凯先生似乎已经不再进行设计了,但我还是应该表示感谢之情。

是的,因为是个人的博客,是个人在繁杂的生活之余,抒发情感的地方,我希望它能够有一个相称的外观。

终于明白了,高于布局、配色、取材等等之上的,一切表象背后的核心,是的,这才是我在Web设计上的终极追求目标——情感。

我所追求的Web设计风格是一种带有情感的风格,一种可以让用户感受到作者想要表达的情感的风格,一种可以带动用户,让用户也渐渐融入作者的情感世界的风格!这不是贴张照片画两条线就可以做到的,不是画个矩形套上阴影和浮雕就可以做到的,不是放个本本中间挖空填点文字进去就可以做到的……

把情感溶入作品中,多少设计师毕生的梦想,这也是普通的设计师与艺术大家的差距吧。不只是平面设计、不只是绘画、不只是文艺、不只是音乐还是别的什么,每一件经由自己双手诞生的东西,哪怕是一行代码,是否有将自己的情感投入其中?是否有这样的意识与觉悟?

引用WordPress中文站下载页的一句话——代码如诗。

一些CSS3新特性介绍及当前浏览器兼容性

回想起我第一次听说CSS3,还是我最早开始学习HTML+CSS的第一本书,Andy Clarke大师的《超越CSS:Web设计艺术精髓》中介绍的,当时别说HTML5了,连IE8还在天上飞呢,然而CSS3却是确确实实被提上日程的东西。一晃好些年过去了,随着HTML5的热度逐步上升,新型浏览器一个接一个地发布,CSS3也再次引起了人们极高的关注。那么现在,我们究竟可以在这些新型浏览器中获得多少CSS3的新体验呢?

我们现在来试试在Opera 10.51、Firefox 3.62、Chrome Dev 5.0.366.2(在大多数的时候可以折射出Safari的表现,故不再单独测试Safari)、IE 9 Preview中,到底能有怎样的表现,又应该怎样去表现。

1、多重背景图

这个是我最早接触的让我眼前一亮的CSS3属性,尤其是有一阵子我想要同时在页头和页尾应用两套不同的背景图并居中的时候。

多重背景图的用法是这样的:

	#div {
	  background-image:
	    url(image1.jpg),
	    url(image2.jpg),
	    url(image3.jpg),
	    url(image4.jpg);
	  background-repeat:
	    no-repeat,
	    no-repeat,
	    no-repeat,
	    no-repeat;
	  background-position:
	    top left,
	    top right,
	    bottom left,
	    bottom right;
	}
	

目前Opera 10.51、Firefox 3.6.2、Chrome Dev 5.0.366.2都能够很完美地支持多重背景图,然而IE9至今还是无法实现,多少让我有些郁闷……

2、RGBA半透明背景色

这个东西我最早是在Opera 10.00的介绍里面了解到的,在实际应用中非常实用,很多地方都可以用到。而且这个新CSS现在受到了非常广泛的支持,上文中提到的浏览器包括IE9和Safari都可以完美地支持RGBA半透明背景色。

RGBA背景色的用法是rgba(red, green, blue, alpha),示例如下:

	#div {
	  background-color:rgba(255, 100, 0, 0.5);
	}
	

与RGBA颜色类似的还有可以使用HSL颜色,方法就是把rgba四个字母替换成hsl三个字母而已。

3、奇偶数选择器

表格隔行不同背景色是现在非常常用的一种表格样式,然而要实现起来却相当困难,不得不给每一行添加class,然后再利用后台程序生成。新的选择器解决了这个问题,并且在上述所有浏览器中可用。

示例表格
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table

奇偶数选择器的使用方法如下:

	#tab_test tr:nth-child(odd) /* 奇数行 */
	{
	  background-color:skyblue;
	}
	#tab_test tr:nth-child(even) /* 偶数行 */
	{
	  color:red;
	}
	

4、:target伪类

另一个非常有意思的小东东,不知道现在的Web设计师是否还记得这么个小东西,写一个超链接,将其href=”#test”,然后在页面中随便某个地方找个元素将其id=”test”,然后当你点击这个超链接,页面将会跳转到这个id=”test”的元素这里。:target伪类就是这个功能的一个延伸,它使得你点击这个超链接时,不只是改变页面位置,那个id=”test”的元素还会被赋予某些样式。

  1. 可能因为博客使用了伪静态的关系,这个实例出现了问题,你可以点试试看,不过也许不会出效果……查看示例

它的用法非常简单,在你想被改变样式的目标的选择器后面加上:target就行,比如你想让一个id叫test的元素改变,只要写#test:target就行,当然你也可以用div:target之类更广泛的选择器。这个小东西现在被以上全部浏览器支持。

5、阴影

平面设计时我们最常用的效果就是阴影了……新的CSS让阴影变得容易了,但是IE9还是无法支持到。

阴影的CSS3实现很要命,因为还是实验期的东西,所以Mozilla和Webkit都在CSS属性之前加上了标记以防止误用,而Opera则决定使用原版属性名,所以:

	#box {
	  box-shadow: #333 3px 3px 4px; /* Opera用 */
	  -moz-box-shadow: #333 3px 3px 4px; /* Firefox用 */
	  -webkit-box-shadow: #333 3px 3px 4px; /* Webkit系用 */
	}
	

6、渐变背景色

如果说阴影的写法你已经觉得很要命了,那么我要告诉你,那个毕竟还只是属性名不同……渐变背景色的用法相当混杂,最早响应官方的是Webkit,但是Mozilla也有自己的另一套写法,于是两者的写法不同……另外,IE9继续没支持到。至于Opera,我到现在也没尝试出来它的渐变怎么写,有可能还不支持吧。

	background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
	background: -moz-linear-gradient(top, red, blue);
	

7、被选中文字样式

一个优化细节的好东西,也许日后会被经常用于页面配色的微调吧,目前上述浏览器均已支持,不过Mozilla还是有前缀,Webkit则用了标准名称。

选择这段文字看看效果,对比下选择其他文字时的效果~~

	::selection {
	  background: skyblue;
	  color: pink;
	}
	::-moz-selection {
	  background: skyblue;
	  color: pink;
	}
	

除了上述的个别效果之外,CSS3还有很多更新的功能,包括立体边框、多栏布局、指向变形等等,不过IE6至今仍在警示着我们:革新还有很长的路要走……