画像角丸
角丸長方形(または円、スクワークル)パスを透明 PNG に焼き込んで画像をクリップする。アバターの正方形、サムネイルタイル、および CSS で行わずに `border-radius` スタイリングに合わせる必要のある画像に役立つ。角ごとのモードは 4 つの独立した半径(左上、右上、右下、左下)を取る;パディングはクリップの周りに不透明な境界線を追加する;JPEG はアルファを運べないため、JPEG モードは透明度を選択した背景色にフラット化する。
使い方
- 画像をドロップする。モードを選ぶ — 通常の角丸カードには均一な半径、正方形からのアバターには円、iOS スタイルの形にはスクワークル。
- 角ごとのモードは、非対称なクリップ(チャットバブルの角など)が必要な場合に 4 つのスライダーを提供する。
- 透明な角を保つには PNG として、アルファよりサイズが重要な場合は JPEG としてダウンロードする。
よくある質問
- スクワークルとは?
- 円と正方形の間の連続的曲率の形状 — iOS アプリアイコンの形状、Apple の「スーパー楕円」(n≈4)。曲率に直線から曲線への急激な遷移がないため、角丸長方形よりも柔らかく見える。
- なぜ出力にチェッカーボードの背景がある?
- それは透明な領域を示すプレビューだけ。ダウンロードされた PNG は実際の透明度を保つ — ページにドロップすると、角は透けて見える。
関連ツール
Border Radius ジェネレーター
コーナーを個別ドラッグ、楕円半径、CSS コピー — チャットバブル・ピル・ブロブ・タブのプリセット付き。
画像トリム (透明・単色の余白を自動カット)
画像の透明・白・黒・任意の単色の余白を自動検出してカット。許容差スライダー、パディング指定、PNG/JPEG/WebP 出力。すべてブラウザ内で処理。
ラウンドロビン ペアスケジューラ (トーナメント・1on1 ローテーション)
全参加者が互いにちょうど 1 回ずつ対戦するように — 古典的な circle method でラウンドロビンのペア組みスケジュールを生成します。
CSS clip-path ビルダー (円、楕円、多角形、Inset)
CSS `clip-path` プロパティのビジュアルビルダー — 形状を選択 (円、楕円、inset、多角形)、スライダーで数値調整、プレビュークリックで多角形の点を追加、貼り付け可能な CSS 宣言をコピー。10 種の形状プリセット (三角形、六角形、星、矢印、吹き出し、十字など) を内蔵。
画像クロップ(アスペクト比)
画像を 1:1・16:9・4:3 などの標準アスペクト比に自動中央クロップ。
画像シャープ化 (アンシャープマスク)
ブラウザ内でアンシャープマスクアルゴリズムを使い写真やスクリーンショットをシャープ化 — 3 つのスライダー (amount, radius, threshold)、4 つのプリセット (控えめ → 極強)、リアルタイム before/after 比較、PNG ダウンロード。アップロードなし。