デザインとカラー ガイド
完全なガイド、例、トラブルシューティングを読むにはツールを選択してください。
CSS ボックス シャドウ ジェネレーター — ガイド、例、よくある質問
階層化されたボックスのシャドウを視覚的にデザインし、制作可能な CSS をコピーします。
4 分で読みましたCSS グラデーション ジェネレーター — ガイド、例、よくある質問
複数のカラーストップを使用して、線形、放射状、円錐形のグラデーションを作成します。
4 分で読みました境界半径ジェネレーター — ガイド、例、よくある質問
各コーナーを個別に制御し、有機的な形状や錠剤をプレビューします。
4 分で読みましたカラーコンバーター — ガイド、例、よくある質問
ライブスウォッチとコントラストヒントを使用して、HEX、RGB、HSL、HSV の間で変換します。
4 分で読みましたWCAG コントラスト チェッカー — ガイド、例、よくある質問
テキストのコントラスト比を測定し、通常のテキストと大きなテキストの AA/AAA 準拠を確認します。
4 分で読みましたPXからREMへのコンバーター — ガイド、例、よくある質問
ピクセルを rem に変換し、構成可能なルート フォント サイズに戻します。
4 分で読みましたCSS フレックスボックス ジェネレーター — ガイド、例、よくある質問
フレックスボックス レイアウトを視覚的に構築し、CSS をコピーします。
4 分で読みましたCSSグリッドジェネレーター — ガイド、例、よくある質問
レスポンシブな CSS グリッドの列、行、ギャップを視覚的に作成します。
4 分で読みましたCSS 三角形ジェネレーター — ガイド、例、よくある質問
境界線トリックを使用して、任意の方向に CSS 三角形を作成します。
4 分で読みましたグラスモーフィズムジェネレーター — ガイド、例、よくある質問
ぼかし、色合い、境界線、影を付けた曇りガラスのカードを作成します。
4 分で読みましたカスタム スクロールバー ジェネレーター — ガイド、例、よくある質問
WebKit および Firefox の CSS プロパティを使用してスクロールバーのスタイルを設定します。
4 分で読みましたCSSアニメーションジェネレーター — ガイド、例、よくある質問
タイミングを構成可能なフェードアンドスライドのキーフレーム アニメーションを作成します。
4 分で読みました流体タイポグラフィージェネレーター — ガイド、例、よくある質問
ビューポート間でスムーズに拡大縮小する Clamp() フォント サイズを作成します。
4 分で読みましたCSSフィルタージェネレーター — ガイド、例、よくある質問
ぼかし、明るさ、コントラスト、彩度、色相のフィルターを視覚的に組み合わせます。
4 分で読みましたカラーパレットジェネレーター — ガイド、例、よくある質問
ベースカラーから補色、類似、三項および四項のパレットを生成します。
4 分で読みましたティント＆シェードジェネレーター — ガイド、例、よくある質問
任意のベースカラーから 5 つのティントと 5 つのシェードを作成します。
4 分で読みましたSVG ウェーブ ジェネレーター — ガイド、例、よくある質問
セクション分割線と背景の滑らかな SVG ウェーブ パスを生成します。
4 分で読みましたフォントペアリングサンドボックス — ガイド、例、よくある質問
システム フォントを使用して、見出しと本文のフォントの組み合わせをプレビューします。
4 分で読みましたシステム フォント スタック ジェネレーター — ガイド、例、よくある質問
UI と散文用の既製のシステム フォント スタックをコピーします。
4 分で読みましたCSS テキスト シャドウ ジェネレーター — ガイド、例、よくある質問
レイヤードテキストシャドウをデザインし、CSSをコピーします。
4 分で読みました