【CSS】CSSでマスク、クリッピングをしてみよう

こんにちは。
今日はCSSに関するポストです。

まず、CSSで以下のようなプロパティを使ったこと有りますか?

clip

clipプロパティは、ボックスを切り抜き表示(クリッピング)する際に使用します。
引用:clip-スタイルシートリファレンス

.element {
    clip: rect(10px, 20px, 30px, 40px);
}

このような形で、通常のCSS指定どおり上から時計回りに指定します。

これはCSS2でも使えました。

ただ、通常はoverflow:hidden;にして、位置を調整するのが一般的だったように思えます。

clip-path

本日の目玉はこちら。これまでのclipでは短形で、かつ絶対的に配置されている場合のみ有効でした。

どうなるか見てみましょう。

img.sample-img{
    width:300px;
    clip-path: circle(100px at center);
    -webkit-clip-path: circle(100px at center);
}

丸くクリッピングされましたね。
まぁこれだとborder-radiusでもできちゃうわけですが、at centerとつくことで中央から切り取られているのが特徴的ですね。

他にも、

img.sample-img{
    width:300px;
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

このように複雑なポリゴンで設定すると…

こんな形もできちゃいます。

polygonに設定する値は考えればできそうなものですが、さすがに面倒ですよね。
もちろんあります。ジェネレーター。

Clippy — CSS clip-path maker

http://bennettfeely.com/clippy/

まとめ

いかがでしたか?
CSS3のプロパティにはまだまだ一般的に使われていないものがたくさんありそうです。スマートフォンのサイトなどCSS3のみでも大丈夫な場合や、Webkitで動くことが想定されている場合など、どんどん新しいプロパティを使っていきたいですね!

参考:Clipping and Masking in CSS | CSS-Tricks

フォローして続編をチェック

@universionsをフォロー