SafariとChromeのCSS対応:文字や画像にマスクをかける

エ・ビスコム・テック・ラボ
2009-07-09 19:09:02
  • このエントリーをはてなブックマークに追加

マスクを利用してテクスチャをかける

 マスクを工夫すれば、文字や画像に簡単にテクスチャをかけることもできる。たとえば、次のサンプルはマスクを使って文字と画像にキャンバス地風のテクスチャをかけたものだ。

テクスチャをかけたもの(画像をクリックすると拡大します) テクスチャをかけたもの(画像をクリックすると拡大します)
div{
-webkit-mask-image: url(texture.png);
}
 ここでは、次のようなマスク画像を利用している。
マスク画像(texture.png) マスク画像(texture.png)
ブラウザで表示を確認する
 次回は、マスク関連の残りのプロパティや、1つの要素に複数のマスクを適用する方法を紹介する。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]