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

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

　今回は、レンダリングエンジンにWebkitを利用しているSafari 4とGoogle Chrome 2が独自にサポートした機能の中から「マスク」を紹介する。

　マスク機能を利用すると、文字や画像を特定の形で切り抜いたり、テクスチャをかけたりすることができる。

マスクをかける

　マスクをかけるには、-webkit-mask-imageまたは-webkit-mask-box-imageプロパティを利用する。ここでは、マスクをかけるために文字と画像を表示して、全体を青色の枠線で囲んだサンプルを用意した。サンプルに表示している風景画像の大きさは350×215ピクセルとなっている。

用意したサンプル（画像をクリックすると拡大します） 用意したサンプル（画像をクリックすると拡大します） 
div{
border: solid 1px blue;
}


MASK
*
※ブラウザで表示を確認する

　さらに、上のサンプルの風景画像を円形のマスクで切り抜くため、次のようなマスク画像を用意する。マスク画像は116×107ピクセルの大きさで、白色の部分を透過して24bitのPNGフォーマットで作成してある。

マスク画像（circle.png） マスク画像（circle.png）

　-webkit-mask-imageプロパティでマスク画像を指定し、に対して適用すると、円形が縦横に繰り返しタイリングされたマスクで風景画像が切り抜かれることがわかる。

-webkit-mask-imageプロパティで風景画像にマスクをかけたもの（画像をクリックすると拡大します） -webkit-mask-imageプロパティで風景画像にマスクをかけたもの（画像をクリックすると拡大します） 
img{
-webkit-mask-image: url(circle.png);
}
※ブラウザで表示を確認する

　これに対して、-webkit-mask-box-imageプロパティでマスク画像を指定すると、風景画像に合わせて引き延ばされた円形のマスクで切り抜かれることがわかる。

-webkit-mask-box-imageプロパティで風景画像にマスクをかけたもの（画像をクリックすると拡大します） -webkit-mask-box-imageプロパティで風景画像にマスクをかけたもの（画像をクリックすると拡大します） 
img{
-webkit-mask-box-image: url(circle.png);
}
※ブラウザで表示を確認する

マスクの繰り返しのパターンを指定する

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]