memoirのLPサイトのデザインでCSSのclip-pathを使用してみた感じ結構良さ気だったのでサンプルリポジトリを作成してみたので紹介
リポジトリ
紹介
以下で紹介用のサイトとスライドを作成した。
■URL
https://try-css.vercel.app/
■スライド
speakerdeck.com
CSSのclip-pathを使用することで、要素をトリミングして、様々な形状に変更することが可能になります。
使い方としては、以下のようにclip-pathをしていすると、
.triangle { background-color: #fff; width: 10rem; height: 10rem; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
要素を、以下の画像のように三角形にトリミングできる。
clip-pathに以下のパラメータを設定できる。
値 | 内容 |
---|---|
inset | 四角形を設定 |
circle | 丸を設定 |
ellipse | 楕円を設定 |
polygon | 多角形を設定 |
これを使用してサンプルを色々作ってみた。
サンプル週
斜め線を使用したデザイン
https://try-css.vercel.app/clippath/section
カードにリボンをつける
https://try-css.vercel.app/clippath/ribbon
clip-pathでボタンにアニメーションをつける
https://try-css.vercel.app/clippath/button
マウスホイールさせるアニメーションする
clip-pathで画像を切り抜く
https://try-css.vercel.app/clippath/image
clip-pathを使ってデザインしてみる
以下を参考にミニチュアのデザインを作成してみた。
https://try-css.vercel.app/clippath/screen
まとめ
IE11でサポートされていないので、そこだけ注意が必要だけど、 斜めを使用するデザインを1つのcssだけで表現できるので、便利だなと感じた。