Toolipedia 埋め込み
JA
← すべてのテキストツール

ニューモーフィズム生成

やわらかく立体的なボタンやカード（ソフトUI）を作り、CSSをコピーできます。

  • 無料
  • 登録不要
  • どの端末でも使える

約ニューモーフィズム生成

ニューモーフィズム(ソフトUI)は、明るい影と暗い影の2つの影を使って、ボタンやカードがページから軽く浮き出たり、へこんだりして見えるようにします。サイズ、距離、ぼかし、形を調整して、CSSをコピーできます。対になる影がはっきり見える、中間色の背景で最もよく機能します。

ニューモーフィズム生成の使い方

  1. 背景と要素のベースの色を選択してください。
  2. 柔らかく盛り上がった、または押し込まれた見た目になるまで、距離、ぼかし、強度を調整してください。
  3. CSSのbox-shadowコードを、プロジェクトにコピーしてください。

このツールを使う理由

別名

よくある質問

ニューモーフィズムはアクセシビリティの点で優れていますか?

多くの場合、見えません。要素と背景のコントラストが低いと、輪郭が見えにくくなります。視力の弱い人でも見つけられるよう、重要なボタンには分かりやすいテキスト、枠線、色を付けてください。

ニューモーフィックのボタンが、白いページで見えなくなるのはなぜですか?

この効果は、中間の明るさの表面にある2つの影に依存します。真っ白な上では、明るい影が見えません。両方の影が見えるよう、わずかに色の付いた背景を使ってください。

押し込まれた(インセット)ボタンはどう作りますか?

ツールにあれば、形を「インセット」または「押し込み」に切り替えてください。要素の内側で影が反転します。そのスタイルを、ボタンのアクティブ状態に使ってください。

ニューモーフィズム生成は無料ですか？

はい。Toolipediaのニューモーフィズム生成は無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

ニューモーフィズム生成 を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール