使用带有 Neumorphism Effect/Soft UI 的 JavaScript 设计计算器

在本文中，我们将学习如何使用 HTML、CSS 和 JavaScript 创建具有 Neumorphism 效果的工作计算器。可以使用此计算器执行基本的数学运算，例如加法、减法、乘法和除法。

方法： Neumorphism 是一种装饰网页元素并在任何网页上创建 3D 效果的现代方法。 HTML 和 CSS 可用于创建此动画效果。 Neumorphism 可以使用 CSS box-shadow 特性来实现。它用于在一侧为元素提供深色和浅色阴影。背景似乎与中性用户界面元素相关联，就好像它们被挤出或嵌入其中一样。一些人称它们为“软 UI”，因为软阴影是如何用于创建错觉的，并且样式几乎是 3D 的。

HTML 代码：在本节中，我们将制作 Neumorphism Calculator 的布局。

index.html

CSS 代码：在本节中，我们将使用一些 CSS 属性来设计 Neumorphism Calculator。

样式.css

body {
  background-color: rgb(214, 214, 214);
}
  
.container {
  width: 250px;
  height: 400px;
  margin: 80px auto;
  border-radius: 10px;
  background-color: rgb(214, 214, 214);
  
  /* box-shadow is used to achieve Neumorphism 
  by using a light shadow and a dark shadow*/
  box-shadow: 5px 5px 10px #b6a9a9, 
      -5px -5px 10px #ffffff;
}
  
.cal-box {
  width: 200px;
  margin: 20px auto;
}
  
#display {
  border: none;
  outline: none;
  color: black;
  text-align: right;
  font-weight: 600;
  padding: 15px;
  margin: 30px 0 20px 0;
  background: transparent;
  
  /* Inset shadow gives the appearance that 
    the element is being pressed into it.*/
  box-shadow: inset 2px 2px 5px #babecc, 
      inset -5px -5px 10px #ffffff;
}
  
.button {
  margin: 15px 0 0 5px;
  width: 42px;
  height: 42px;
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px;
  background-color: rgb(214, 214, 214);
  
  /* box-shadow is used to achieve Neumorphism 
  by using a light shadow and a dark shadow */
  box-shadow: 5px 5px 10px #b6acac, 
      -5px -5px 10px #faf4f4;
  display: inline-block;
}
  
.button:active {
  
  /* When the button is pressed, the inset 
  shadow provides the impression that the 
  element is being pressed into it */
  box-shadow: inset 1px 1px 2px #babecc, 
      inset -1px -1px 2px #fff;
}
  
.clearButton {
  color: white;
  background-color: red;
}
  
.mathbutton {
  color: white;
  background-color: black;
}

输出：

使用 Neumorphism Effect/Soft UI 的 HTML、CSS 和 JavaScript 工作计算器