「CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」」のご紹介| Webデザイン参考記事まとめアプデ

2020年12月11日(金)

CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」

0

1

2

9

CSS clip-path Editor

See the Pen CSS clip-path Editor by Mads Stoumann
(@stoumann) on CodePen.

CSS clip-path EditorCSSのclip-pathを簡単な操作で生成できるオンラインツールです。Codepenで公開されています。

基本的には既に用意されている形状を選択して利用する形ですが、ポリゴンタイプ（緑のドット）はポイントを増減させる事が出来ます。方法は別のポイントを選択して+キーを押せば隣に生成、-キーを押せばポイントが消えます。

ポイントはマウスでも動かせますが、選択して矢印キーでも移動できるようになっています。コードは下部に生成されます。

本ツールは前述通りCodepenで公開されているのでソースコードも確認する事が出来ます。

CSS clip-path Editor

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」』についてまとめています。

気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。