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

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

角丸マスクの四隅を伸縮しないようにする

 -webkit-mask-box-imageプロパティでは適用先に合わせてマスクを伸縮するが、4隅だけ伸縮しないように設定することもできる。この機能を利用すれば、角丸のマスクを用意したときに4隅は伸縮せず、辺だけを伸縮して大きさを調節することが可能だ。

 たとえば、次のような角丸のマスク画像を用意して表示を確認してみよう。

角丸のマスク画像(kadomaru.png) 角丸のマスク画像(kadomaru.png)

 -webkit-mask-box-imageでマスク画像を指定しただけでは、マスク全体が伸縮されて四隅にジャギーが出てしまう。

マスク全体が伸縮したもの(画像をクリックすると拡大します) マスク全体が伸縮したもの(画像をクリックすると拡大します)
img{
-webkit-mask-box-image: url(kadomaru.png);
}
ブラウザで表示を確認する

 しかし、次のように伸縮位置を指定すると4隅だけは伸縮されず、きれいな角丸で切り抜くことができる。

マスクの四隅を伸縮しないようにしたもの(画像をクリックすると拡大します) マスクの四隅を伸縮しないようにしたもの(画像をクリックすると拡大します)
img{
-webkit-mask-box-image: url(kadomaru.png) 20 20 20 20;
}
ブラウザで表示を確認する

 なお、伸縮位置の指定方法は-webkit-border-imageプロパティと同じだ。詳しくは、「1枚の画像からサイズ可変な罫線を表示する」を参照してほしい。

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