CSS3：テキストでクリッピング！ちょっとお洒落なテキスト要素
-webkit-background-clipを使ってテキストをデザインしていきましょう。
ただしベンダープリフィックスが付いていることから分かる通りサポート環境に制限があるため、使いどころは限られますが参考までにどうぞ。
KEY SENTENCE
[1] はじめに
[2] 実装手順
[1] はじめに
こんなのを作ってみようと思います。
テキスト要素に合わせて画像を切り抜くというやり方を順を追って説明していこうと思います。
[2] 実装手順
ここではexample01.の実装方法を説明していこうと思います。
HTML
<p class="kirinuki">text</p>
CSS
color: white;!important
background: url(pass/images/sample.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:0 1px 3px rgba(0,0,0,.25);
これで実装完了です。
お好きな画像を背景にあてて是非試してみましょう。
ただし先にも言った通り、サポート環境に制限されています。
現状では、Chrome,Safari,firefox4.0以降になります。
あっという間ですがこんなところで今回はお終い。
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
