Safari 4が対応したCSSの新機能:グラディエント、反転、マスク

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

画像の輪郭をマスクでぼかす

 マスク(Mask)の機能を利用すればテキストや画像を自由な形に切り抜くことができる。用意するマスクしだいで、画像の輪郭をぼかすことも可能だ。

 たとえば、次のように

の中にテキストと画像を表示したものを用意する。

テキストと画像を表示したもの(画像をクリックすると拡大します) テキストと画像を表示したもの(画像をクリックすると拡大します)
MASK
*
ブラウザで表示を確認する

 この画像の輪郭をぼかして表示するため、次のようなマスク画像を用意する。マスク画像は白色の部分を透過して、24bitのPNGフォーマットで作成しておく。

マスク画像(mask.png) マスク画像(mask.png)

 あとは、-webkit-mask-box-imageプロパティでマスク画像を指定し、に対して適用すれば、画像をマスクで切り抜いて輪郭をぼかすことができる。

画像がマスクで切り抜かれたもの(画像をクリックすると拡大します) 画像がマスクで切り抜かれたもの(画像をクリックすると拡大します)
div img{
-webkit-mask-box-image: url(mask.png);
}
ブラウザで表示を確認する

Google Chromeの対応状況

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