CSSグラデーションテキスト効果の2つの方法の比較_体験交換

Photoshop を使用せずにグラデーションのタイトル テキストを作成したいですか? ここでは、CSS と PNG 画像のみを使用してこれを作成する方法を示す簡単な CSS トリックを示します。テストの結果、この方法はほとんどの主流ブラウザに適しています。もちろん、IE6 には透過 PNG をサポートするハックが必要です (幸いなことに、Microsoft はユーザーの IE6 を IE7 に自動的にアップグレードするよう懸命に取り組んでいます ^.^、詳細: 警告: IE7 自動更新は近日公開予定です)

利点

これは、ja スクリプトや Flash を使用しない純粋な CSS テクニックであり、ほとんどのブラウザで適切に動作するために使用できます (IE6 は必要です)透明 PNG をサポートするハック)
これは完璧なヘッダー デザインです。Photoshop を使用する必要がなく、帯域幅と時間を大幅に節約できます。
この効果は任意の Web フォントで使用できます。また、フォント サイズも可変です。
どのように機能しますか?

この手法は非常に簡単です。単純に使用するだけです。テキストの上に幅 1 ピクセルの透過 PNG が重ねられます。



html


CSS グラデーション テキスト

CSS

キーここにあります:

h1 { 位置: 相対 }
h1 スパン { 位置: 絶対 } h1 {
フォント: 太字 330%/100% "Lucida Grande";
位置: 相対;
カラー: #464646;
}
h1 スパン {
背景: url(gradient.png)repeat-x;
位置: 絶対;
表示: ブロック; width: 100%;
height: 31px;
}

これで完了です ^_^ ここをクリックして例を確認してください。

IE6 のサポートを有効にしてください
次のハックにより、IE6 は透明な PNG-24 形式の画像のみをサポートできるようになります。