Results show

Hello everyone, this is Yearth, welcome to 10 mins CSS, spend 10 minutes a day to achieve simple and elegant CSS effects.

So let’s get straight to the point. Let’s take a look at today’s results:

Analysis of the

This looks pretty cool, so let’s take a look at some of the keys to achieving this effect.

In fact, after careful observation, it is not difficult to see that the realization of the effect has the following points to pay attention to:

  • background
  • Overall layout of calculator
  • Calculator ground glass effect
  • Calculator button response effect
  • Calculator 3D Effects

Let’s analyze them one by one.

background

In fact, there are many ways to realize this background. For example, the simplest one is to directly use a background image. Here, we use a slightly more complicated method: Linear-gradient + Clip-path.

Seeing these two properties, I believe you get the idea:

  • tobodySet the lowest background color
  • respectivelybefore 和 afterSpread it on top. Use itlinear-gradientSet the background color for it
  • withclip-pathCut out two separate circles

Implement the code directly according to the idea:

:root {
  --bg-color: # 091921;
  --bg-before-color: linear-gradient(#e91e63.#ffc107);
  --bg-after-color: linear-gradient(#ffffff.#da00ff);
}
body {
  background: var(--bg-color);
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-before-color);
  clip-path: circle(22% at 30% 20%);
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-after-color);
  clip-path: circle(20% at 70% 90%);
}
Copy the code

The effect is as follows:

Overall layout of calculator

First we implement the HTML structure of the calculator, through observation can see that the whole calculator is divided into two parts:

  • Display box for output results
  • Buttons for input parameters, of which the Clear and Plus keys are relatively special

Then the overall structure is as follows:

<section class="container">
  <form class="calculator" name="calc">
    <input type="text" class="value" readonly name="txt" />
    <span class="num clear" onclick="calc.txt.value = ''">c</span>
    <span class="num" onclick="calc.txt.value += '/'">/</span>
    <span class="num" onclick="calc.txt.value += '*'">*</span>
    <span class="num" onclick="calc.txt.value += '7'">7</span>
    <span class="num" onclick="calc.txt.value += '8'">8</span>
    <span class="num" onclick="calc.txt.value += '9'">9</span>
    <span class="num" onclick="calc.txt.value += '-'">-</span>
    <span class="num" onclick="calc.txt.value += '4'">4</span>
    <span class="num" onclick="calc.txt.value += '5'">5</span>
    <span class="num" onclick="calc.txt.value += '6'">6</span>
    <span class="num plus" onclick="calc.txt.value += '+'">+</span>
    <span class="num" onclick="calc.txt.value += '1'">1</span>
    <span class="num" onclick="calc.txt.value += '2'">2</span>
    <span class="num" onclick="calc.txt.value += '3'">3</span>
    <span class="num" onclick="calc.txt.value += '0'">0</span>
    <span class="num" onclick="calc.txt.value += '00'">00</span>
    <span class="num" onclick="calc.txt.value += '.'">.</span>
    <span class="num" onclick="calc.txt.value = eval(calc.txt.value)">=</span>
  </form>
</section>
Copy the code

To achieve grid arrangement, the most convenient layout is naturally grid, where clear and Plus can be set separately:

.container {
  position: relative;
  z-index: 10;
  border: 1px solid #fff;
}

.container .calculator {
  display: grid;
}

.container .calculator .value {
  grid-column: span 4;
  height: 140px;
  width: 300px;
  background: transparent;
}

.container .calculator span {
  display: grid;
  height: 75px;
  width: 75px;
  border: 1px solid #fff;
}
Copy the code

The effect is as follows:

Let’s refine the details:

  • Calculator shadow
  • Calculator border radians
  • Text position, color, size, etc. (tip: Place-items allows you to quickly place text in the desired location)
  • The border between the display box and the buttons
:root {
  --container-border: 1px solid rgba(255.255.255.0.2);
  --container-shadow: 5px 5px 30px rgba(0.0.0.0.2);
  --container-value-border: 1px solid rgba(255.255.255.0.05);
  --container-value-color: #ffffff;
}

.container {
  position: relative;
  border-radius: 6px;
  z-index: 10;
  border-top: var(--container-border);
  border-left: var(--container-border);
  box-shadow: var(--container-shadow);
}

.container .calculator {
  display: grid;
}

.container .calculator .value {
  grid-column: span 4;
  height: 140px;
  width: 300px;
  text-align: right;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 30px;
  background: transparent;
  color: var(--container-value-color);
  border-right: var(--container-value-border);
  border-bottom: var(--container-value-border);
}

.container .calculator span {
  display: grid;
  place-items: center;
  height: 75px;
  width: 75px;
  color: var(--container-value-color);
  font-weight: normal;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  border-right: var(--container-value-border);
  border-bottom: var(--container-value-border);
}

.container .calculator .clear {
  background: var(--container-value-clear-bg-color);
  grid-column: span 2;
  width: 150px;
}

.container .calculator .plus {
  grid-row: span 2;
  height: 150px;
}
Copy the code

The effect is as follows:

Calculator ground glass effect

There are two key points to achieve the frosted glass effect:

  • Translucent background color
  • backdrop-filter: blur()

Here we add these two attributes to the container:

:root {
  --container-bg-color: rgba(255.255.255.0.05);
}

.container {
  background: var(--container-bg-color);
  backdrop-filter: blur(15px);
}
Copy the code

The effect is as follows:

Calculator button response effect

Hover and Active can be set separately:

:root {
  --container-value-hover-bg-color: rgba(255.255.255.0.05);
  --container-value-active-color: #192f00;
  --container-value-active-bg-color: #14ff47;
  --container-value-clear-bg-color: rgba(255.255.255.0.05);
}

.container .calculator span {
  transition: 0.5 s;
}

.container .calculator span:hover {
  transition: 0s;
  background: var(--container-value-hover-bg-color);
}

.container .calculator span:active {
  color: var(--container-value-active-color);
  background: var(--container-value-active-bg-color);
  font-size: 24px;
  font-weight: 500;
}
Copy the code

The effect is as follows:

Calculator 3D Effects

As for the 3D effect of the calculator following the mouse, it was easy to implement with the help of an external library: Vanilla -tilt.

<script type="text/javascript">
  VanillaTilt.init(document.querySelector(".container"), {
    max: 15.speed: 400.glare: true."max-glare": 0.2
  });
</script>
Copy the code

Interested readers can check out an online demo of this effect: 3D Frosted Glass Calculator effect