CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ

前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

[kudakurage]

id:y-kawaz さんにご意見をいただいて、contentプロパティはタイトル属性を読むように変えました。適当な要素にクラスつければキレイになるとかできます。

[y-kawaz]

CSSにテキスト書くとか本末転倒なのはどうにかならないの？これじゃ、適当な要素にクラスつければキレイになるとかできないじゃん。

[tecepe]

なんかすごくWeb1.0時代っぽいｗ

[Nean]

あっ！

[ko-ya-ma]

擬似クラスのレイヤー構造に注意

[warriorking]

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック - くらげだらけ（くだくらげのBLOG）

[kkdicekk]

こりゃすげぇや。

[kams3261]

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック

[idr_zz]

なんと！テキストにこんなに多彩なグラデが掛けられるとは！！ CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ

[aoiasaba]

CSSでどこまでできるかチェックしてたんだけどここまでやるか。すごい。逆にわからなくなってきたw

[mut00tum]

CSSテキストグラデーションは意外と面倒なのだな…

[sippo_des]

, [text]

[dameleon]

テキストにグラデーションをかける方法

[naga_sawa]

CSSだけでテキストにグラデーション/いまのところWebkit限定か/Firefoxでは未対応

[witchstyle]

(2011/11/13のエントリ) giyo.jp の記事「週刊Webテク通信」 http://gihyo.jp/design/clip/01/weekly-web-tech/201111/17?skip 経由

[cauchym]

あとで読む

[fumitana]

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック

[kakei]

自分で説明するよりこちらのほうが理解してくれそう。

[hidehish]

見てる:

[morishitatakahiro]

css

[tsubabababa]

これ便利（・∀・）！

[sugi511]

おぉ、これはなかなか。

[fm811]

テキストにグラデ。めも

[kazwoo215]

コレすっげー！こんな事が出来るんだ！

[Gaganbo]

CSSのみでテキストにグラデーション

[naonya3]

すげー

[zaitakujin]

HTML5

[sixteengram]

css3でやるとき読む

[tacshiss]

-webkit-mask-imageと擬似要素のcontent:attr(title);

[chimantare]

「テキストにグラデーション]

[CliffordBrown]

iOS5から使えるって

[tsuki-rs]

やべぇ。。パネぇっす。。

[nasu_t]

css gradation reflect

[miyan1ban]

css・テキスト・グラデーション

[ozpa]

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ（くだくらげのBLOG） (id:kudakurage / @kudakurage)