This is the 8th day of my participation in the August Text Challenge.More challenges in August

preface

Recently, a lot of friends in Dribbble found a wave of popular new design style, and the difference is that this trend has gone back to the former, but it is different from pure simulacra, now it has a popular term called “new mimicry”.

1. What is new mimicry

The “new mimicry” English name Neumorphism, also known by designers as Soft Ui (Soft Ui). Simply put, it is a kind of similar relief effect, between flat and projection. It integrates mimicry and graphic design technology, imitates the form of real objects and endods the UI elements with a sense of reality. It is a realistic style and a new design style worth exploring.

2. Characteristics of new mimicry style

advantages

• Elements don’t float
• Element color is relatively single, and highly unified with the background
• Bright color projection on upper left corner, dark color projection on lower right corner
• Mostly in the form of cards
• More suitable for large rounded corners

disadvantages

• Lack of contrast, resulting in poor visibility
• The overall vision is relatively flat, lack of hierarchy

Realize the principle of

There are generally two basic shapes of new mimicry: “raised effect” and “sunken effect”. “Raised effect” is implemented with an outer shadow, and “sunken effect” is implemented with an inner shadow.

CSS implementation

1. “Bump Effect”

<div class="container">
    <div class="soft-element"></div>
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f1f3f6;
  }
  .soft-element {
    width: 185px;
    height: 185px;
    border-radius: 30px;
    background: linear-gradient(145deg.#ffffff.#f1f3f6);;
    box-shadow:  6px 6px 18px #c6c7ca,
                -6px -6px 18px #ffffff;
  }
</style>
Copy the code

2. “Depression Effect”

<div class="container">
    <div class="soft-element"></div>
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f1f3f6;
  }
  .soft-element {
    width: 185px;
    height: 185px;
    border-radius: 30px;
    background: linear-gradient(145deg.#d9dbdd.#ffffff);
    box-shadow:  6px 6px 18px #c6c7ca,
                -6px -6px 18px #ffffff;
  }
</style>
Copy the code

A complete example

<div class="container">
<div class="soft-phone">
  <div class="header">
    <div class="btn">
      <i class="bi bi-chevron-left"></i>
    </div>
    <div class="header-title">Play</div>
    <div class="btn">
      <i class="bi bi-three-dots"></i>
    </div>
  </div>
  <div class="rotary"></div>
  <div style="font-size:20px;">Deep reason shallow</div>
  <div style="font-size:14px; font-weight:500; color:#a2adbe; margin:10px;">Eminem</div>

  <div class="tool">
    <div class="btn">
      <i class="bi bi-skip-start-fill"></i>
    </div>
    <div class="btn">
      <i class="bi bi-caret-right-fill"></i>
    </div>
    <div class="btn">
      <i class="bi bi-skip-end-fill"></i>
    </div>
  </div>

  <div class="progress"></div>

  <div class="footer">
    <div class="btn">
      <i class="bi bi-cast"></i>
    </div>
    <div class="btn">
      <i class="bi bi-list-ul"></i>
    </div>
  </div>
</div>
</div>
Copy the code

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #5c7aaa;
  font-weight: 600;
  font-size: 18px;
  background: #f1f3f6;
}
.soft-phone {
  width: 375px;
  height: 812px;
  border-radius: 60px;
  background: #f1f3f6;
  box-shadow: 15px 15px 30px #dee0e2, -15px -15px 30px #ffffff;
}
.header..tool..footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px 30px;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 15px;
  background: #f1f3f6;
  box-shadow: 7px 7px 14px #dee0e2, -7px -7px 14px #ffffff;
}
.btn .bi::before {
  font-weight: 700 ! important;
}
.rotary {
  width: 220px;
  height: 220px;
  margin: 0 auto 45px;
  border-radius: 130px;
  background: #f1f3f6;
  box-shadow: 21px 21px 43px #dee0e2, -21px -21px 43px #ffffff;
}
.tool {
  padding: 40px 45px;
}
.tool .btn {
  width: 58px;
  height: 58px;
}
.tool .btn .bi {
  font-size: 24px;
}
.footer {
  justify-content: center;
  padding: 40px 45px;
}
.footer .btn {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 16px;
}
.progress {
  position: relative;
  height: 5px;
  margin: 0 30px;
  border-radius: 5px;
  background: #d7e3ef;
  box-shadow: inset 1px 1px 4px #dee0e2, inset -1px -1px 4px #ffffff;
}
.progress::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 40%;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(145deg.#a9b5e7.#d2d7fd);
  box-shadow: 1px 1px 4px #dee0e2, -1px -1px 4px #ffffff;
}
.progress::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 40%;
  transform: translate(-40%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 20px;
  background: linear-gradient(145deg.#a9b5e7.#d2d7fd);
  box-shadow: 3px 3px 6px #dee0e2, -3px -3px 6px #ffffff;
}
</style>
Copy the code

The effect can also be hahaha

reference

01. What are Design Trends Neumorphism? 02. Neumorphism UI Design Trends? 03. “New Mimicry — A New UI Trend Analyzed by Foreign Designers”

Neumorphism

(For attention)

Welcome to follow my official account: Class A Coder and get daily dry goods push. Thank you again for reading. I’m Han the Programming Monkey