こんなデザインどのようにして作りますか

clip-pathプロパティを使用すると、内部のコンテンツは表示され、外部のコンテンツは非表示になるクリッピング領域を作成します。 デザインソフトでいうところの、マスク機能のようなものがCSSで実現できます。
もともと要素があった場合、その要素に対して何らかの形でくり抜くことができます。 例えば画像を円形にくり抜いたり、星型にくり抜いたりすることができます。
手作業ではなかなか難しいのですが、ペイントソフトなどを使ってパスを書き出せば、複雑な形のマスクも簡単に作ることができます。
頂点はCSSで自由に変更ができるので、Javascriptなどと組み合わせて動的に形を動かすことができ、おもしろいアニメーションが簡単に作れます。
うまく使えば、見たこともないような面白い効果のデザインやアニメーションが簡単に作れるので、ぜひclip-pathをマスターして、おしゃれでかっこいいデザインのサイトを作ってみましょう。
clip-pathを指定してみよう
clip-pathの指定方法はとても簡単です
属性値の部分で、さまざまな形を指定していきます。
値の指定は細かくたくさんあるのですが、まずは以下の基本的な形を覚えましょう
- inset():内部の長方形を定義します。
- circle():半径と中心位置を使用して円を定義します。
- ellipse():2つの半径と位置を指定して楕円を定義します。
- polygon():頂点のセットを用いて多角形を定義します。
clip-pathでは他にも様々な指定があります。
その他の細かい属性値はこちらを参照してください
clip-pathのサンプル
具体的にどのようになるのか見てみましょう。
See the Pen clip-path by Yoshimune (@hachidaime) on CodePen.
属性値の指定の仕方
clip-pathの属性値の具体的な指定方法は以下の通りです。
各形状に必要なパラメータを考えると覚えやすいと思います。
clip-path:inset(上 右 下 左 round 半径);
上下左右のマージンはmargin属性と同じ書き方、 roundでは角丸が表現できますが、こちらはborder-radiusと同じ書き方が使えます。
clip-path:circle(半径);
半径を指定するだけで円が描けます。
clip-path:ellipse(横半径 縦半径);
楕円を描くため、横と縦のそれぞれの半径を指定できます。
clip-path:polygon(x1 y1, x2 y2, x3 y3, x4 y4);
x, y(左上を0とする座標系)を複数指定して、それぞれをつなぐ形のシェイプが描かれます。
どうでしたか、ここでは代表的なものにとどめて紹介しましたが、
ここに掲載していない属性値もまだまだあります。
アニメーションと組み合わせると面白い表現がたくさんできますので、ぜひ覚えておきましょう。