CSS スタイルワークベンチ
ボタン・カード・バッジ・アバターのテンプレートを選び、実際の要素の上で背景グラデーション、枠線、角丸、多層の影を同時に調整して、完成した CSS ルールをまとめてコピーできます。
CSS スタイルワークベンチ
ボタン・カード・バッジ・アバターのテンプレートを選び、実際の要素の上で背景グラデーション、枠線、角丸、多層の影を同時に調整して、完成した CSS ルールをまとめてコピーできます。
スタイルワークベンチの使い方
1 つの実要素に 4 つのプロパティを重ねる
単一プロパティのジェネレーターは色の四角しか見せません。ここではボタン・カード・バッジ・アバターに実際のテキストが入ったプレビューなので、1px の枠線、12px の角丸、2 層の影を、実際の UI と同じように同時に判断できます。パネルをオフにすると設定を失わずにそのプロパティだけ出力から外せます。
出力は 1 つのルールセット
CSS パネルは background、border、border-radius、box-shadow の順に 1 つのセレクター内へ出力します。影は 1 層 1 行、不透明度が 100% 未満の色は rgba() で書かれるのでそのまま貼り付けられます。.element セレクターはコンポーネントに合わせて変更してください。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
以前のグラデーション・影・角丸ジェネレーターはどこへ？
それらはこのワークベンチの 4 つのパネルになりました。以前の URL も引き続き使え、対応するパネルを開いた状態でワークベンチが表示されます。以前作れたものは何も失われていません。
影の色が 16 進カラー＋不透明度スライダーなのはなぜ？
影は通常「ベース色×強さ」として考えられます。2 つを分けておくと複数レイヤーで同じ色を使い回して不透明度だけ変えられ、出力時に自動で rgba() に合成されます。
何かサーバーへ送信されますか？
いいえ。プレビューと CSS はブラウザー内で計算され、アカウントもアップロードも履歴の保存もありません。