くらげだらけスマートフォン用の表示で見るくらげだらけこの広告は、90日以上更新していないブログに表示しています。Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてです。Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体的にどのようにするのか解説します。↓さっそく今回のデモページへのリンクはこちらです。CSSにテキスト書くとか本末転倒なのはどうにかならないの?これじゃ、適当な要素にクラスつければキレイになるとかできないじゃん。contentプロパティはタイトル属性を読むようにしています。ありがとうございます!「:before」「:after」擬似クラスのレイヤー構造ある要素に含まれるテキストと「:before」「:after」擬似クラスにcontentプロパティで追加した要素、さらにある要素が包括する要素のレイヤー関係はこのようになるみたいです。(p要素がspan要素を包括している場合)「:before」「:after」擬似クラスで追加した要素は通常もともとのテキストなどとは重ならないので「position:absolute」で重ねた場合のレイヤー順序です。z-indexプロパティで並び替えることができるので気にしなくてもいいのかもしれませんが、z-indexを使わないでやる場合はこのようになると覚えておけば良いと思います。mask-imageプロパティとグラデーションで効果をつけるmask-imageプロパティはそのプロパティを指定した要素にマスクをかけることができます。円形にマスクで切り抜きたい場合は右のような黒い円形の塗りがある透過画像を用意します。mask-imageでは黒い塗りの部分だけが表示されるようにマスクされます。黒い円形にぼかしをかければ、マスクもぼやっとくりぬいてくれます。img{-webkit-mask-image:url(mask.png);}mask-imageプロパティにはbackgroundプロパティと同じようにgradientを指定することもできます。画像を使わなくても簡単なマスク画像ならgradientで作れるんですね。下に向かってだんだん消えていくようなマスクにしたい場合は、下に向かって透過度が増していくようなグラデーションを指定します。色をRGBAで指定します。rgba(0,0,0,0));}CSSでテキストにグラデーションをかけるこれらを応用することで、「:before」「:after」擬似クラスで追加された最大2色のグラデーションをテキストに対して加えることができます。具体的にはp要素に含まれるテキストのカラーをベースカラーとして、「:before」「:after」擬似クラスで追加した要素でグラデーションをかけます。擬似クラスで追加した要素で追加したテキストがベースのテキストとぴったり重なるようにします。p要素にはtitle属性を追加して、contentプロパティにはタイトル属性を読むようにします。content:attr(title);}次に、どういうグラデーションにするかを決めて、ベースの要素と擬似クラスで追加した要素のテキストカラーに指定します。color:#003577;}最後に擬似クラスで追加した要素にグラデーションマスクをかけます。rgba(0,0,0,1));}これをさらに応用することで、いろいろなバリエーションのテキストエフェクトを作ることができます。簡単に作ってみたエフェクトのサンプルコードを紹介します。rgba(0,0,0,0));}CSSでリフレクトをかけるおまけでリフレクトも少し紹介します。リフレクトは「box-reflect」プロパティでかけることができて、テキストに限らず反射効果をつけることができます。30」という記事の時に紹介していましたね。繰り返し説明しておくと、box-reflectには、リフレクトを掛ける方向・オフセット値・リフレクトのマスクの3つのパラメータを指定することができます。below」の中から指定できて、aboveは上部・belowは下部に反射効果を描画します。マスク画像は指定しなくてもいいですが、指定する場合はmask-imageと同じような値を指定することができます。単純に、床に反射しているような効果をつけたい場合はこのような指定になります。50%,rgba(0,0,0,0.5));}先程のグラデーションテキストDemoにリフレクトをつけたデモを作ってみました。Safariから使えるようになったHTML5・CSSを試してみました【前編】iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐ...2011-10-10PrePANというサイトのお手伝いをしました。Pluginの作り方(初級編)とTipsはてなブログをはじめよう!kudakurageさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。