はじめに
こんにちは。CMA制作部スタッフYaatonです。
HTML要素をCSSで切り抜きたいとき、最近ではさまざまな選択肢があります。
昔からあるoverflow、距離や位置を数値で指定して切り抜くclip-path、グラデーションや画像と組み合わせて切り抜くmaskなど、場所に合わせて使い分けができると表現の幅が広がります。
この記事では、それぞれの特徴を紹介します。
1.overflow
切り取れる形状はシンプルで、要素の幅・高さ・角丸の指定によって、どこまで表示するかを決められます。
従来はoverflow: hidden;がよく使われてきましたが、最近はスクロール機能を完全に無効化でき、子要素でposition: sticky;も使えるoverflow: clip;を選択するようになりました。
See the Pen qiita-overflow by CMA Designer (@CMA-Designer) on CodePen.
2.clip-path
要素内のどこからどこまでを、どのようなパスで切り取るかを指定できます。
四角形・円・楕円といったシンプルな図形に加え、SVGパスを指定できるpath()や、数値で切り取り範囲を指定できるshape()など、指定方法も豊富です。
特にshape()を使うと、吹き出しやリボンのような形状を、要素全体の幅に合わせてレスポンシブに可変させる指定もでき、これまでにない表現が可能になります。
See the Pen qiita-clip-path by CMA Designer (@CMA-Designer) on CodePen.
3.mask
backgroundプロパティと同じ使い方で切り取る領域を指定できます。
画像の形状で切り取るほか、グラデーションも使えるため、要素を部分的にふわっとマスクするような処理も可能です。
See the Pen qiita-mask by CMA Designer (@CMA-Designer) on CodePen.
また、マスク領域を複数指定した場合は、mask-compositeを使うことで「重なった部分のみをマスクする」「下のレイヤーのマスク領域を上のレイヤーのマスク領域で切り取る」といった、Illustratorのパスファインダーのような表現もできます。
maskプロパティと同時にbackgroundも指定できるため、マウスオーバー時にアイコンの色を変えたい場合にも非常に便利です。
See the Pen Untitled by CMA Designer (@CMA-Designer) on CodePen.
まとめ
今まではPhotoshopやIllustratorといった画像編集ソフトで表現していたようなことがCSSでどんどん実装可能になってきています。複雑なレイアウトや装飾を実現する際の参考にしてみてください。