私があまりCSSについて勉強できなくなっているせいかもしれませんが、一時期のデザイン（見せ掛け）のために空要素を増やしたりといった無駄な構造をやめ、HTMLをよりstrict（web標準的な意味で厳密）にする傾向になってきていると思ったら、またトリッキーなことやっている人がいたのですね。

はてブされているので、知っている人もいると思いますが、私のほうから再度ご紹介させていただきます。

画像が重くて表示されない場合にロード画像を表示する

参考元blog：
DynamiX Labs » Blog Archive » css: add a “loading” icon to your larger images

FlashやJavaScriptなど動作が重くて表示に時間がかかるときに、読み込むまでに以下のようなアイコンを表示させて、ロード中であることを明示していますよね。

重い（容量の大きい）画像で読み込みに時間がかかる場合に、CSSにて画像の背景にローディングイメージを表示させることで実現しています。

XHTMLソースは以下のとおり。

<div class="load">
<img src="image.jpg" alt="image file" />
</div>

CSSソースは以下のとおり。

.load {
background:url(load.gif) 50% 50% no-repea;
width:100px;
height:100px;

※参照元サイトのソースコードとは一部異なります。

ここで問題なのは、画像の横と縦のサイズを指定しておかないといけないという点。そのため汎用性に欠けます。
JavaScriptで画像サイズを取得するのもよいのかもしませんが、それならCSSでローディングイメージを表示する意味が全くないわけですしｗ
まあ面倒でも、画像サイズが異なる場合は個別に指定するしかないようですね。

では、このローディングイメージどうやって作ったらよい？と頭を悩ませてしまうんですが、実はこのローディングアイコンを自動で作れるジェネレータがあるんです！ 世の中便利ですね～。30種類以上のアイコンを自由な色に変更できます。

Ajaxload - Ajax loading gif generator

テキストにCSSでグラデーション効果をつける

参考元blog：
CSS Gradient Text Effect

png画像を利用してテキストにエフェクトをかけることができるそうです。

XHTMLソースは以下のとおり。

<h1><span></span>CSS Gradient Text</h1>

CSSソースは以下のとおり。

h1 {
   position: relative;
   font-family:Alba Matter;
   font-size:200%;
   color: #464646;
}

h1 span {
   position: absolute;
   display: block;
   width: 100%;
   height: 31px;
   background: url(gradation.png) repeat-x;
}

以下のCSSプロパティに凝ってみるとおしゃれな文字ができますよ。

• font-mamily
• font-size
• font-weight
• color
• letter-spacing
• line-height
• text-transform
• margin
• padding

このテクニックの問題として、spanの空要素が発生してしまいます。というわけで、JavaScript（jQuery）を使用して自動にspanタグをマークアップさせてソースコードはきれいにするという技も紹介されています。

また、IE6以前ではpng画像が表示できないのですが、CSSにJavaScriptコードを記述できるテクニックを使ってpng画像を表示させるソースコードも紹介しているので併せて設定してみてください。
詳細は元blogを参考にしてください。デモファイルのダウンロードもできます。

png画像の作り方ですが、フィルターをかける色と文字の背景色が同じでなくてはなりません。例えば、文字が黒色で背景色が白の場合、白から透明になる画像をフィルターとして用いなければなりません。
png画像はphotoshopなどを使用して作成するものですが、Photoshopがない方や作るのが面倒な場合は、デモファイルの画像を使用するのもよいのかもしれませんが、規約をよくお読みになってご使用ください。
Background Image Makerという背景画像ジェネレーターがあるのですが、それではうまく透過するアルファチャンネルの画像を作ることできませんでした＞＜

ちなみに私も面白半分にpng画像を作ってみたので、よろしければご自由にお使いください。Photoshopファイルを元に新しい画像を作られても結構です。Photoshopのバージョンは6です。

文字のサイズは40pxまでに対応で、文字サイズの可変によりグラデ具合が可変しないように背景画像（フィルターの画像）を位置を縦方向、横方向50%にするのがベストです。

サンプル

psdファイルのダウンロード

psdファイルをダウンロードする