What is new mimicry?

The English name of the New mimicry is “Neumorphism”, which is a combination of New+Skeuomorphism and also called “Soft UI”. Simply put, neocimicry is a graphical style that simulates real objects to make the UI elements of an interface feel real.

In the first half of this year, the new mimicry UI design was all the rage. It was hailed as one of the hottest UI design trends of 2020, and it was wildly popular on the Internet. New mimicry integrates mimicry and graphic design technology, imitated the form of real objects, and endowed the UI elements of the interface with a sense of reality. It is a realistic style and a new design style worth exploring. It’s stylish, it’s detailed, and it’s really fun to design with. Therefore, in this article, I will teach you how to implement the new mimicry style UI elements using CSS3, and share some examples of websites using the new mimicry UI.

The origin of

The new mimicry style began as a collection of designs shared by Alexander Plyuto on Dribbble. One of these works using the new mimicry style has soared to Dribbble’s 2019 POP number one hit.

The development of

Although the current new mimicry style is very popular, but it is only limited to the design circle, there is still a long way to go from the real application. Many big factories in China are also exploring and trying to implement new mimicry UI. Some new mimicry figures can also be seen on some web pages of big factories such as Baidu and Tencent. For example, the website of Tencent Global Digital Ecology Conference.

The principle of

For the most basic “raised” and “sunken” effects, the card uses the same background color as the page’s background color, except that the former uses an outer projection and the latter uses an inner projection.

  • Results show

  • Combined with the color

CSS implementation

Ordinary play

  • Start by defining two divs
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div class="card left"></div>
    <div class="card right"></div>
</body>
</html>
Copy the code
  • The CSS part
html {
    /* Define a variable */
    --bgColor: #ff5353;

    /* RGBA four values are: red (R), green (G), blue (B), transparency (A) */
    --whiteShadow: -15px -15px 25px rgba(255.117.117.5);
    --blackShadow: 15px 15px 25px rgba(110.40.40.2);
}

/* Set some page layout styles */
body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor);
}

.card {
    width: 30vh;
    height: 30vh;
    margin: 45px;
    background-color: var(--bgColor);
    border-radius: 30px;
}

/* Main part */
.left {
    /* Set the outer shadow */
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
}

.right {
    /* Set the inner shadow */
    box-shadow: inset var(--blackShadow),
                inset var(--whiteShadow);
}
Copy the code
  • The effect

Senior play

  • Define two divs
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div class="card left"></div>
    <div class="card right"></div>

</body>
</html>
Copy the code
  • CSS section (Change Shadow direction)
    html {
        /* Define a variable */
        --bgColor: #ff5353;

        /* RGBA four values are: red (R), green (G), blue (B), transparency (A) */
        --whiteShadow: -15px -15px 25px rgba(255.117.117.5);
        --blackShadow: 15px 15px 25px rgba(110.40.40.2);

        --whiteShadow2: 15px 15px 25px rgba(255.117.117.5);
        --blackShadow2: -15px -15px 25px rgba(110.40.40.2);
    }

    /* Set some page layout styles */
    body {
        display: flex;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background-color: var(--bgColor);
    }

    .card {
        width: 30vh;
        height: 30vh;
        margin: 45px;
        background-color: var(--bgColor);
        border-radius: 30px;
    }

    /* Main part */
    .left {
        box-shadow: inset var(--blackShadow2),
                    inset var(--whiteShadow2);
    }

    .right {
        box-shadow: var(--blackShadow2),
                    var(--whiteShadow2);
    }
Copy the code
  • The effect

More advanced gameplay

  • Define two four divs, this time two right div with two left nested inside
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div class="card right">
        <div class="card left"></div>
    </div>

    <div class="card right2">
        <div class="card left2"></div>
    </div>

</body>
</html>
Copy the code
  • CSS section (Change Shadow direction)
html {
    /* Define a variable */
    --bgColor: #ff5353;

    /* RGBA four values are: red (R), green (G), blue (B), transparency (A) */
    --whiteShadow: -15px -15px 25px rgba(255.117.117.5);
    --blackShadow: 15px 15px 25px rgba(110.40.40.2);

    --whiteShadow2: 15px 15px 25px rgba(255.117.117.5);
    --blackShadow2: -15px -15px 25px rgba(110.40.40.2);
}

/* Set some page layout styles */
body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor);
}

.card {
    width: 30vh;
    height: 30vh;
    /* margin: 45px; * /
    background-color: var(--bgColor);
    border-radius: 30px;
}

/* Main part */
.left {
    box-shadow: inset var(--blackShadow),
                inset var(--whiteShadow);
}

.right {
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
    padding: 5px;
}

.left2 {
    box-shadow: inset var(--blackShadow2),
                inset var(--whiteShadow2);
}

.right2 {
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
    padding: 5px;
    margin: 50px;
}
Copy the code
  • The effect

conclusion

  1. Using CSS3 variables at development time makes it easy to adjust the new mimicry style of the entire page
  2. The above code focuses on the definition and use of Shadow
  3. There is more to discover, such as using gradients