图1

先看效果图，

图2

今天学习的方法呢，还是copy html+css源码来分析 看别人是怎么写代码 怎么实现的

HTML5 structure—header, hgroup & h1-h6

在.container 这个div里面出现了 下面的代码

<header>
<hgroup>
<h1>Pure CSS speech bubbles</h1>
<h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
</hgroup>
<p>The demo page for <a href="http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/">Progressive enhancement: pure <abbr>CSS</abbr> speech bubbles</a>.</p>
<p>For a detailed explanation <a href="bubbles.css">view the <abbr>CSS</abbr> file</a>. It is heavily commented.</p>
<p>All examples use simple, semantic <abbr>HTML</abbr>. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.</p>
</header>

Div 里面出现了header tag， 还有HTML 5的新的元素, hgroup.

The header element represents a group of introductory or navigational aids.
Note A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos

header元素代表了一组介绍的和导航辅助信息。

注意这里的header元素通常想要用来做section的标题（1个h1-h6元素或者一个hgroup元素），但是这并不是必须的，header元素也可以包括section的目录，搜索表单，或者任何相关的logo。

(来自HTML5 (Author Edition)的解释)

hgroup 是一种header的特殊形式，必须包括切且只能包括一组(至少两个)h1-h6。这里有篇文章《HTML5 structure—header, hgroup & h1-h6》详细讲，应该怎么用header，hgroup和h1-h6来做文章的结构。

Drawing a bubble

先介绍下对应图一的画法

HTML 代码

<p class="triangle-isosceles">这是图一的例子</p>

Css的代码

/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	color:#000;
	background:#f3961c; /* default background for browsers without gradient support */

	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(top, #f9d835, #f3961c);
	background:-o-linear-gradient(top, #f9d835, #f3961c);
	background:linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	z-index:-1;
	bottom:-30px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	width:0;
	height:0;
	border-width:15px 15px; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#f3961c transparent transparent;
}

从上面的代码可以看出， css分为两个部分 .triangle-isosceles用来画bubbles； .triangle-isosceles:after用来画三角。 作者的代码真的写的相当漂亮清晰哈。 用渐进增强的概念，先满足最基本的内容需求，然后加入css3才支持的圆角功能呢，和渐变的背景。然后用伪元素来画三角.

.triangle-isosceles：after的意思是在 triangle-isosceles之后插入内容。

content:”\00a0″的意思是插入空格，其实也就是占一个“坑”，至于这个坑长什么样子就要有border-width来决定了

bottom的值是负的（上边界和下边界的宽度和）。这个决定了“坑的位置”，靠近bubble

如果想要标准“坑”是三角的宽度和高度都要取0

上面的这些代码就可以画出下图

其他例子可以见demo页面和css文件，自行研究哈

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+.

1. 在form里面的 input type = image 的时候的 sprites（referentce 1.http://blog.josh420.com/archives/2008/07/using-sprite-images-with-input-typeimage-for-hover-effect.aspx）

把<input type = image>的语句放入一个 div中 如下

<div id="submitButton">
  <input type="image" src="xxx.png"  />
</div>

css 如下
#submitButton {
  cursor:pointer;       /* Give it the hand cursor, like a link */
  height:40px;          /* Image has a height of 80px, only show the first half */
  overflow:hidden;      /* Hide the overflow */
  width:200px;          /* Width of the image */
}
#submitButton:hover input {
  margin-top:-40px;
/* Negative height of half the sprite, to push the image up */
}


2. 在图片链接做hover的效果

<a href='#' class="Button"></a>

css如下
a.wantButton{
    display:block;
    cursor:pointer;
    width:203px;
    height:52px;
    overflow:hidden;
    background:url(XXX.png)；
}

a.wantButton:hover {
    background-position:-204px 0;
}