文字・画像にマスクをかける(1)

CSS3のmask-box-imageプロパティ、mask-imageプロパティを使用すると、
文字・画像にマスク効果をかけることができます。
今回はmask-imageプロパティについて。
試しに下の写真を円の画像(透過PNG画像)でマスクしてみます。

<div class="mask">
<img src="/sakura2.jpg"/>
</div>
.mask img {
-webkit-mask-image:url(./circle.png);
}

テキストも同様にマスクできます。
下記の小さめの円でマスクすると、

.masktext {
-webkit-mask-image:url(../smallcircle2.png);
font-size:80px;
font-weight:bolder;
}
この文章はダミーです。

このようになります。

また、繰り返し・表示位置の指定ができます。
指定の仕方は背景画像の指定の時と同様に、repeat-x、repeat-yなどの値を指定します。

.mask2 img {
-webkit-mask-image:url(../circle.png);
-webkit-mask-repeat:repeat-y;
}

.mask3 img {
-webkit-mask-image:url(../circle.png);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center bottom;
}

※使いようによっては面白い表現ができそうですが、まだSafari・Chrome系のみ対応なのが残念なところ。
他ブラウザの対応を望みたいです。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る