通常1つの要素に対して背景画像は1枚しか指定できませんが、
CSS3では複数画像を指定することができます。
例として下記の2枚の画像を使ってみます。

.bgimg {
background:url("sample1.jpg") no-repeat right bottom, url("umi.jpg");
width:400px;
height:300px;
color:#FFF;
}

上記コードのように、backgroundプロパティで、
カンマ「,」で区切ることで複数の画像をすることができます。
※なおIE8以下では対応していません、IE9からは対応しているようです。

text-overflowプロパティにて、
指定した領域よりテキストがはみ出した場合に「…」で省略することができます。
まずは指定する前のテキスト。

こちらの文章に省略の指定をしてみます。

.over1 {
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:300px;
color:#483D8B;
}

「…」を表示させない場合は以下のようにtext-overflow:clip;とします。

.over2 {
text-overflow:clip;
white-space:nowrap;
overflow:hidden;
width:300px;
color:#483D8B;
}

なおfirefoxではtext-overflowに対応していないので、使用する際は注意が必要です。

文字・画像にマスクをかける、の2回目。
前回に続き今回はmask-box-imageプロパティについてご紹介。
前回と同様に下記の画像を使用してみます。

デフォルトではマスクする画像が引き延ばされて表示されます。
楕円でなく正円にしたい場合はwidth、heightの値を同じく指定すると、うまく表示されます。

<div class="mask02">
<img src="sakura2.jpg" />
</div>

.mask02 img {
-webkit-mask-box-image: url(circle.png);
width:400px;
height:400px;
}

CSS3のmask-box-imageプロパティ、mask-imageプロパティを使用すると、
文字・画像にマスク効果をかけることができます。
今回はmask-imageプロパティについて。
試しに下の写真を円の画像（透過PNG画像）でマスクしてみます。

<div class="mask">
<img src="/sakura2.jpg"/>
</div>

.mask img {
-webkit-mask-image:url(./circle.png);
}

テキストも同様にマスクできます。
下記の小さめの円でマスクすると、

.masktext {
-webkit-mask-image:url(../smallcircle2.png);
font-size:80px;
font-weight:bolder;
}

このようになります。

また、繰り返し・表示位置の指定ができます。
指定の仕方は背景画像の指定の時と同様に、repeat-x、repeat-yなどの値を指定します。

.mask2 img {
-webkit-mask-image:url(../circle.png);
-webkit-mask-repeat:repeat-y;
}

.mask3 img {
-webkit-mask-image:url(../circle.png);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center bottom;
}

※使いようによっては面白い表現ができそうですが、まだSafari・Chrome系のみ対応なのが残念なところ。
他ブラウザの対応を望みたいです。

通常2カラム、3カラムのレイアウトを組む場合、floatプロパティを使用しますが、
CSS3のboxプロパティを使用すると、より簡単にレイアウトを組むことができます。

<div class="boxarea">
<div class="box1">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
<div class="box2">
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
</div>
<div class="box3">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
</div>
</div>

.boxarea {
display:-moz-box;
display:-webkit-box;　
}

.boxarea div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:5px;
width:200px;
line-height:1.6;
}

.box1 {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
background-color:#FFFFB4;
margin:0px 15px 0px 0px;
}

.box2 {
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background-color:#E6F5AF;
margin:0px 15px 0px 0px;
}

.box3 {
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background-color:#CDEBC3;
}

大本のボックスに対してdisplay:box;を指定します。
ボックスの並び順はbox-ordinal-groupにて数字で指定し、簡単に入れ替えが可能です。

blog.wonder-boys.netさんの

display:box;の挙動がブラウザによって違うみたい

の記事が参考になりました。

Wordなどの文書作成ソフトよく見られる、
2行目以下が字下げされた、「ぶらさげインデント」を表現する手法。

※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を

.indent {
text-indent:-1em;
padding-left:1em;
}

text-indentプロパティにて文字をインデントさせることができます。
マイナス方向への指定もできるので、上記のような記述にて「ぶらさげインデント」を表現できます。

雑誌の誌面のような段組みレイアウトを組みたいといった時、floatプロパティを使う場合が多いかと思います。
floatを使う場合、回り込みの解除や横幅のど細かい調整が必要ですが、
CSS3のMulti-column Layout Moduleにて簡単に表現できます。
※ただしIEは未対応、IE9も未対応のようです。

<div class="multi">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字
</div>

.multi {
margin:15px 0px 0px 0px;
-moz-column-count: 3;
-webkit-column-count: 3;
}

column-countプロパティにて簡単に段組みレイアウトが表現できます。
またカラムの幅、境界線の種類・色・太さなどの指定ができます。

.multi2 {
-webkit-column-count: 3;
-moz-column-count: 3;
-webkit-column-width:150px;
-moz-column-width:150px;
-webkit-column-rule-style:dashed;
-moz-column-rule-style:dashed;
-webkit-column-rule-color:#FF0000;
-moz-column-rule-color:#FF0000;
-webkit-column-rule-width:2px;
-moz-column-rule-width:2px;
-webkit-column-gap:20px;
-moz-column-gap:20px;
}

なお、Multi-column Layout Moduleについてはワークスコーポレーションさん

CSS 3の段組みと、その使いどころ

にて分かりやすくまとめられていて、とても参考になりました。

リンクのマウスオン時に、ちょっとしたアクセントになるツールチップ。
そのツールチップをCSSだけでを表示することができます。

マウスをのせると、ツールチップが表示。ツールチップが表示されます。

<p class="chip"><a href="#">マウスをのせると、<span>ツールチップが表示。</span></a>ツールチップが表示されます。</p>

.chip a {
position:relative;
display:inline-block;
}

.chip a span {
display:none;
}

.chip a:hover {
zoom:100%;　/*IE7以下対策 */
text-decoration:none;
}

.chip a:hover span {
position:absolute;
display:block;
width:140px;
padding:3px;
top:-30px;
left:10px;
background-color:#EEE;
border:solid 1px #CCC;
}

a要素に対してdisplay:inline-block;を指定すると、
ブロック要素のように幅や高さを指定しつつ、インライン要素のように改行されずに表示ができます。
ツールチップさせたい文字、画像などをspanタグで囲み、通常時はdisplay:none;にて非表示にします。

画像をリスト要素でマークアップした場合、デフォルトの状態では縦に隙間が生じます。

隙間を無くすにはimg要素に対してvertical-align:bottom;、またはvertical-align: top;を指定します。

<ul class="talelist">
<li><img src="tatelist.png" /></li>
<li><img src="tatelist.png" /></li>
<li><img src="tatelist.png" /></li>
</ul>

.tatelist {
list-style-type: none;
}

.tatelist li img {
vertical-align:bottom;
}

テキストリンクでテキストの文字数が少ないとクリックがしずらい、
といった場合があるかと思います。
そういった時はaタグに対して以下のような指定をすると良いです。

<p class="textlink"><a href="#">テキストリンク</a></p>

.textlink a {
display:block;
width:200px;
padding:10px;
}

テキストリンク

display:block;を指定することによって、aタグをブロック要素にします。
後は適宜、横幅やpaddingを指定していきます。
※ただしあまりクリックできる範囲を広げすぎると、

「クリックしたくないのにクリックされる！」

というように、かえって使いずらいサイトになってしまう恐れもあるので、
やりすぎには注意が必要です。