今天在做一个网站的时候，想到要用类似Ps的logo这种效果。于是Google一下了解了一下用PS跟CSS分别怎么实现。
先介绍一下letterPress
LetterPress在wikipedia上的解释是凸版印刷，SmashingMagazine上有一篇讲2009年web design趋势的文章《Web Design Trends For 2009》。 里面指出，LetterPress在设计中使用的很少，从2009年初开始，在产品设计跟网页设计领域出现了很多这样的设计。

Letterpress的效果，可以用PS跟CSS来实现。

先来看一些例子吧：

Ps实现的

Apple的menu

the 365 Days of Astronomy podcast

CSS实现的

德国的一个设计公司的网站，他们的logo也很不错

我个人还是比较喜欢这个效果的，小细节的质感。

下面讲一下怎么实现

PS

在text的效果里面加上dropshadow，blend mode 调成normal， 颜色白色，透明度50%，角度90，见下图

这个是比较简单的Letterpress的PS实现，以后有空再加一些其他的实现方法。

CSS

用ps实现的网站很多，今天早上看Twitter上有人推madewithlove的网站，看了一下页面，全页面的Letterpress的效果，不太可能是图片替代，就firebug了。 然后发现时用text-shadow来实现的.

<shadow> is defined as [ <color> ? <length>  <length>  <length> ? | <length>  <length>  <length> ? <color> ? ],

前两个length是offset，第三个是blur radius. also applies to the both::first-line and ::first-letter pseudo-element.

跟上图一样效果的话 是用下面这段代码实现

text-shadow: #EEE 0px 1px 0px;

text-shadow是在css2中被引入，它并不被所有的浏览器支持，例如IE。 目前只有五类浏览器支持这个属性 Opera 9.5+, Safari 1.1+, Mozilla/Firefox 3.1+, Konqueror 3.4+ and iCab 3.0.3+.

n353