[CSS]テキストにグラデーション効果をつけるスタイルシート

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。

[beth321]

　コリス

[akirasan76]

テキストにグラデCSS

[webmarksjp]

Webデザイン

[picnicgraphic]

グラデの背景画像を利用してテキストにグラデを。利点：テキストサイズの拡大・縮小ができる/背景画像変更でグラデを変更/見出し画像の作成手間省ける/数が多い場合作成時間・帯域の節約 の説明。

[fooo]

見出し要素に空のspanをかぶせて、疑似グラデーション

[cherrycandy8]

「仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 ／～拡大・縮小～グラデーションを変更することが可能」ブコメだと空spanがネックらしい。。

[usj12262]

すばらしい

[bluerabbit]

これはいいな。使ってみよう。グラデーションの背景画像を表示指定して実現

[night_hike]

「見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示」なるほろ

[apple_chocolat]

テキストなのにスタイルだけでグラデーションつけられる　なんでだー

[kurobuchi]

タイトルだけ見たら一文字ずつ色変えて虹色とかそんなんかと思ったが，これはナイスアイデア．欧文だと格好いいな．

[ricebread]

Safari 1だと入った瞬間に強制終了。と思ったらやっぱり犯人はjQueryだった。jQuery使う人は対象外のブラウザは避けるようにしてくれないかな。迷惑だ。

[chaws2004]

テキストにグラデーション効果をつけるスタイルシート。動的に生成されるものなどにいいかも。

[You-2u]

テキストにグラデーション効果をつけるスタイルシート

[bigwest]

グラデーションの

[rulipon]

使えそう。でも先にHTMLとか理解しないと・・・

[loveanime]

うおー！なんてこった！　便利なのかはまだわからない

[caligo]

テキストにグラデ

[k_ume75]

見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示

[junhirabayashi]

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。

[t-murachi]

テキストの選択が一文字単位ではできなくなる (しづらくなる) のが難点だけど、見出しに限定して使うならまぁ、アリかなぁ。

[bigchu]

: すげぇ

[bsheep]

IE6は透過PNGのハックが必要

[Naoki1]

テキストにグラデーション効果をつけるスタイルシート

[wims_Tea]

テキストにグラデーション効果をつけるスタイルシート

[wakatakahawks]

デザインのために無駄タグってのが気持ち悪い。けどうまいことやれば入れなくても使えそう。試してみる。

[crystaline]

これは便利。使えそうなところにはつかってみようかな。ブログとか。

[teppeis]

アルファチャンネル付きPNGをspanで重ねる / テキストのコピペができるのがgood.

[hysteric_cat]

たまにやってるにゃ

[ag-commerce]

テキストにグラデーション効果をつけるスタイルシート