02/23/2005
有很多朋友发Email询问如果通过CSS实现blog上各种图片边框效果，下面把一些方法分享出来。
图片边框效果主要有两种，较简单的方法是直接在CSS文件中对img定义边界（border），例如我在CSS中定义了：
img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }
那么在HTML文件中，或者在blog更新的时候，针对嵌入的图片定义class="framed"就会有相应的边框效果。
<img src="......" class="framed" >
上面的方法的优点是比较简单，但实现的效果比较单调，并不一定能达到令人满意的效果和一些特殊效果，例如阴影，色彩变化等等。下面介绍第二种方法，比第一种稍微复杂一些。很多Blogger喜欢在每篇文章中附带一副固定大小的图片，图文并茂的网页看起来更加生动。这个时候我们可以为图片设计更加个性化的边框效果，让网页的视觉效果更加丰富，不过这种方法需要对图片大小进行限制。
实例：CSS图片边框效果 - CSS Image Frame
首先需要制作一个边框效果的背景图片，然后在CSS中对背景边框定义图片替代（Image replacement)和定位和平移。我制作了一个例子，有兴趣的朋友可以下载源文件并在自己的网页中进行实验。特别指出，这个效果中图片尺寸是：163px X 105px
很多朋友会奇怪为什么需要3个框，上图演示了边框效果图在CSS定义中的处理过程，可以看到，在边框效果背景文件中的3个框，分别为默认，鼠标划过，以及点击后定义了不同的效果。然后通过CSS中的定位平移进行控制。在CSS网页设计中，图片替代以及定位平移是经常使用的技巧，这种方法不但解决了对于不同浏览器之间的适用性，也避免了负载图片过大而影响浏览速度的问题。更重要的是方便易用，我们不需要使用Photoshop对所有图片进行边框加工而能快速实现边框效果。 详细的方法可以看范例，也欢迎大家提供更多的意见。
01/10/2005
Flickr提供了一个叫
Flickr Badge的功能，通过嵌入javascript将Flickr中的图片方便的显示在自己的Blog或网站上。这也是Blogger们喜欢的功能，不过Flickr默认的几种显示效果都不太好，我通过CSS重新进行了定义，缩小了图片显示的尺寸并增加了半透明效果，设置如下：（效果见下面）。
首先在Flickr Badge获得javascript代码并添加到页面html中，并添加CSS DIV "flickrimg"：（注意：下面的代码设置图片显示数目为8，raw=1）
Read More "通过CSS定义控制Flickr的显示效果"
10/14/2004
Dave在悉尼We04会议演讲时宣布了他的出书计划，我便迫不及待的在Amazon上预定了这本新书：The Zen of CSS Design。和他一起编写的作者还有Molly，另一位知名网页设计师和网页标准的布道者。该书将收集36套CSS禅意花园中的优秀设计，就设计, 布局, 图像, 排印, 特效等六个方面进行案例式分析，全书将集中在以CSS为设计工具的多样运用。这本书将是网页设计师不容错过的佳作。另见jjgod的介绍。
越来越多的Web设计师们投身到网页标准的推广行列，而大型的商业网站也开始拥抱“网页标准”，在过去的一个月当中，Yahoo，ABC News相继改版，推出了基于CSS和符合Web Standards的全新界面。随着Firefox浏览器的迅速普及和Blog的发展，网页标准设计逐渐替代传统网页设计而走向主流已是必然的趋势。
不久前，我在自己的Blog链接里面增加了一个栏目：WaSP Evangelism，里面收集了一些中文方面推广网页标准的作者和网站，虽然目前为止网页标准在中文网络中还出于草根传播状态，但是默默积累下的知识沉淀将为中文化的传播奠定下良好的基础。网页标准和CSS设计包含了概念，技术和思路，这些都非一朝一夕之鼓吹所能完善，与其大张旗鼓的叫概念倒不如踏踏实实的做事情。
POPOEVER翻译了一篇很不错的文章：样式表编写效率手册（原文），昨天和他讨论了一些翻译上的细节问题，他留言提起了的W3C.org.cn，目前无法访问，可能是一个计划中的标准汉化项目吧。而另一位中文方面的网页标准推广者JJGOD的Web4C也重新开张，收集了许多关于这方面的资源。
另外我也不止一次的推荐Onestab（web 开发技术荟萃），他（们）在这方面确实下了很多功夫，翻译许多优秀的论文和案例。不过一直未能与其幕后作者取得联系，实在是很遗憾，
09/ 3/2004
CSS ZenGarden:
CSS禅意花园是最富盛名的CSS设计陈列馆，Dave Shea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式，却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台，看看禅意花园的主人自己怎么说。
Cssvault:
Cssvault是第一个以网站缩略图的方式呈现的优秀设计的网站，而CSS陈列馆（showcase）这一说法也是由这里开始，从开始至今大约一年的时间里面，收录了大量的优秀设计，是CSS设计师必去的网站之一。
Web Standards Awards:
Web Standards Award，顾名思义，这里也是收集符合“网页标准”设计的网站，除收集外，还对每月收集来的网站进行评选，获胜设计可以冠以当月“网页标准”设计奖的头衔，对于设计师来说，也是一种殊荣。
CSSBeauty:
CSSBeauty属于后起之秀，今年五月成立至今，也收录了大量的优秀站点。而与前几个网站有所不同的是，他对说收录的网站进行了分类，诸如：商业，娱乐，个人等等，使得收集的内容对访问者更有针对性。
unmatched〈style〉:
这个网站是最新出炉的一个CSS陈列馆，和前面介绍的几个网站大同小异，也是采用缩略图的方式呈现，当然每个网站收集者的审美特征都不同，多一个地方无疑也给钟情于CSS设计的朋友多了一个选择，而且他们的更新很勤快。
The Weekly standards:
这里是我特别推荐的一个，前面的网站都收集了很多优秀的设计，符合“网页标准”，可为什么这些网站符合“网页标准”，到底这些网站好在哪里？除了外观之外，还有那些地方是需要设计者注意的？这里将带给你答案，每周一个案例分析，精彩纷呈。
Stylegala:
还有呢，Stylegala，也是上个月才推出的一个CSS陈列馆项目，和前面介绍的如出一辙，唯一不同的地方是访问者可以对收集其中的优秀设计进行投票。而作者对色彩搭配方面颇为敏锐，所收录的网站皆有很强的视觉效果。
Postearte:
不好意思，还有最后一个，既然说了是一网打尽，当然要收集得全面一些。这个网站的主人好像是欧洲人，总之他写的不是英文，看不明白。不过他自己做的Postearte这个网页本身就是一个很优秀的设计。特别是导航条，别出心裁。
现在，连我自己都有点“审美疲劳”了。
06/18/2004
前几天一位做网页设计的朋友问我这个问题：如何通过CSS来实现图片半透明效果，并且在IE和Mozilla上都可以得到支持。下面将我的方法分享给大家。
下图为通过CSS实现的图片透明效果
这个效果在IE和Mozilla浏览器上都可以工作，代码如下
<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">
在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。针对IE的设定：this.filters.alpha.opacity=50 而针对Mozilla的设定：this.style.MozOpacity=0.5. 大家可以直接用这行代码给图片定义，只须修改图片地址就能实现上图效果。
Read More "CSS opacity - 实现图片半透明效果"
10/22/2003
忙着设计weciti，怎么样才算是一个好的设计呢？Accessibility，User Experience都是值得遵循的设计理念。而就设计技术的运用来讲更多的是使用CSS，在Brainstorms&Raves又看到一篇很好的文章：Top 10 Reasons to Learn CSS。
最近一直在研究关于web的人性化界面，易用性的问题，当然少不了阅读Jeffrey Zeldman关于web design的经典著作designing with web standards。CSS真是个其乐无穷的技术，不管是整体构架还是细节设计，都能体现出creative和architect的精神。一个优秀的web page，比如Fastcompany，完全通过CSS设计，没有包含任何javascript，scripts的网页，Dan Cederholm的这个设计堪称完美。apative path的设计团队也是高手云集，在User Experience也颇有建树，常常有很多精彩的文章，他们的主页居然是通过CSS和MT建立的，又是一个典范！
我本身并不是个Web Designer，在这方面也有先天不足（色弱）。可能正是因为这点更激发了我对web design的兴趣，往往自己做不到的东西具有更强的挑战性。而且通过学习CSS以及接触User Experience，能锻炼全局意识和整体规划，没有一个整体轮廓在运用CSS的是无从入手的，和传统设计有很大的分别！这点我认为非常重要，无论是将来管理企业，规划产品，没有全局意识在市场也就缺乏前瞻性。期待着尽快完成weciti的设计，我的那些天才伙伴们也不能闲着，他们的宣传，发展工作更为重要。
又一个好消息，当然是对web designer而言。A List Apart 3.0经过3个月的测试正式发布，又是Jeffrey Zeldman 的杰作！
