Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS] CSS clip-path maker – CSSを使ったクリッピングパスのジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSを使って画像のクリッピングパスができるジェネレーター。画面左にある様々なシェイプで画像にマスクをかける事ができます。クリップした内容はページ下部にあるコードエリアにリアルタイムに反映されるので、思った通りのクリップパスが描けたらCSSコードをコピペするだけで使えます。ここで使われるプロパティは“clip-path”というもの。シェイプを選んだり修正したりすると、polygonの値が変化します。画像を使わずにコードだけでマスクを切る事ができるので便利ですね。ただ円形についてはグレーアウトしてて選べませんでした。polygonじゃ描けないからなのか、理由はよく分かりませんが、サークルシェイプって最近よく使われる印象なので、そこだけちょっとアレだしナニではあります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください