どのように、ノモフォリズム?

Nepoorphismは、デザインの要素は、彼らはまだそれに接続されているように見える間、バックグラウンドから押し出すように見えるデザインの傾向であった(フロートに表示されません).

UXDesignCC
奇形は、CSSを使用して簡単に実現可能です.

あなたの中にdivを作成します.HTMLファイル

<div class="box neumorphic-shadows">Neumorphism is cool</div>

あなたのCSSの

あなたのページの背景色を設定して、Nepoorphismは通常暗い背景で最もよく働きます、しかし、それはupto好みです

body { 
    background-color: #1b1e27; 
  }

△1 B 1 E 27
今のところ
ここで覚えておくべき重要なことは、フォアグラウンド要素の色が背景と同じでなければならないことです

.box{
    background: #1b1e27;

    // shaping the card 
    height: 5em;
    width: 20em;
    align-items: center;
    border-radius: 50px;
    display: flex;
    height: 200px;
    justify-content: center;
    margin-left: 35%;
    margin-top: 15%;
    padding: 10px 20px;  

    // font
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: rgb(255, 255, 255); // color of the font 

  }

今、我々はボックスの影を追加する必要が実際の効果を達成するために

.neumorphic-shadows{
    box-shadow:  5px 5px 31px #111319,
    -5px -5px 21px #373d5081;
  }

正のピクセル距離(5 px)のシャドウ値は、影

を制御します

負のピクセル距離(- 5 px)のシャドウ値はハイライト

を制御します
あなたは、方向と影の距離を変更するには、標識や値を変更することができます/ハイライトそれぞれ

最終結果
脚注:
あなたの仕事をあなたがneumorphism.ioを使用することが非常に容易にするために、それはNumorphic効果のためのCSSコードを生成する素晴らしいウェブサイトです.あなたの好みに応じて効果を微調整し、それのために生成されたCSSコードを得ることができます.