【neumorphism】CSS實現新擬態設計風格 計算器

  • 2020 年 3 月 27 日
  • 筆記

最近在社區看到一種設計風格——新擬態，國外用neumorphism這個詞表示，關於這種風格的介紹，可以看下面的鏈接

火遍外網的「新擬態」設計風格，2分鐘就能用PPT做出來！

使用CSS模擬： GITHUB上的一個DEMO

為了方便演示我將顏色以及大小調節了一下：

image.png

今天群里老哥推薦了一個直接生產CSS的網站，非常方便 neumorphism

核心程式碼：

box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);

修改後的style.css文件

* {      margin: 0;      padding: 0;  }    .button {      width: 100px;      height: 100px;      font-size: 50px;      margin: 10px;      cursor: pointer;      background: #e0e5ec;      outline: none;      box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);      border: none;      border-radius: 50px;      color: lightcoral;  }    .button:active {      box-shadow: inset -2px -2px 6px rgb(163, 177, 198, 0.6), inset 2px 2px 6px rgba(0, 0, 0, 0.8);  }    .dl {      width: 220px;  }    .ll {      height: 220px;  }    .textview {      width: 448px;      margin: 10px;      padding: 8px;      font-size: 50px;      padding: 10;      border: none;      border-radius: 25px;      color: lightcoral;      outline: none;      background: #e0e5ec;      box-shadow: inset 2px 2px 6px rgb(163, 177, 198, 0.6), inset -4px -5px 8px rgba(255, 255, 255, 0.5);  }    .main {      width: 551.25px;      height: 787.5px;      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);      background: #e0e5ec;      border-radius: 15px;      box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);  }    .bandt {      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);  }    .bg {      background: #e0e5ec;      height: 100vh;  }

配色參考：GITHUB地址

Tags:

VirMach 便宜 VPS