Visual CSS / devs tools
Visual CSS Studio
背景、グラデーション、枠線、影、フィルター、2D・3D変形、状態を1つの要素へ重ね、実案件向けのCSSを作る統合Studioです。
編集画面を準備しています…
このツールの範囲
見た目だけで終わらない生成結果
見た目の設定だけでなく、状態、画面幅ごとの差、実装手順、注意点まで1つのProjectとして保存できます。
- 複数効果を同じ要素へ合成
- default・hover・focus・active・disabled・dark状態
- PC・タブレット・スマートフォン比較
- CSS・WordPress・Recipe JSON出力
出力形式
HTML · CSS · WordPress · Recipe JSON
Glossary
画面に出てくる英語の意味
- Preview（プレビュー）
- 現在の設定を実際の見た目として確認する領域です。
- State（ステート）
- マウスを重ねた時、キーボードで選んだ時、押している時、無効時などの状態です。
- Responsive（レスポンシブ）
- 画面や親要素の幅に合わせて、配置や見た目を調整する考え方です。
- Reduced motion（動きを減らす設定）
- アニメーションによる負担を減らすため、端末側で動きを少なくする利用者設定です。