What is new mimicry

Refer to zhihu

The most complete network of new mimicry design explanation

Simply put, neocimicry is a graphical style that works by bringing realism to the UI elements of an interface. In fact, it is also a kind of quasi-object style, but the form of expression is different. It first appeared in the catch-up wave, and then was successively included in the 2020 design trend forecast. At the end of 2019, it was gradually known, discussed and paid attention to. Whether it is one of the inevitable trends in the future or not, the rise of a thing is more or less reasonable, we hold a dialectical perspective to see, to learn, to understand.

New mimicry design style features

  • 1. There is only one light source
  • 2. The contrast between components and background is weak
  • 3. Button status: visually protruding indicates that the button is not selected, and concave indicates that the button is selected

H5 of actual combat

Create an HTML file

<! DOCTYPEhtml>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>New mimicry button</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html.body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

</body>
</html>
Copy the code

Write an icon

Go to Alibaba vector icon library to download an icon, I downloaded a search icon

Alibaba Vector icon library

<div class="icon-div">
    <div class="icon-img">
        <img src="./icon/ linear magnifier search.png"/>
    </div>
    <p>search</p>
</div>
Copy the code

Center them and give them a background color

body {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #ebecf0;
}

.icon-div {
    width: 100px;
    height: 160px;
    border-radius: 20px;

    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    align-content: center;

    user-select: none;
}

.icon-div .icon-img {
    width: 100px;
    height: 100px;

    /* A proper rounded corner */
    border-radius: 20px;

    /* Close to background color, low contrast */
    background-color: #ebecf0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-div .icon-img img {
    width: 60px;
}

.icon-div p {
    color: slategrey;
}

.icon-div:hover {
    cursor: pointer;
}
Copy the code

It looks like you can’t see anything right now, ok, what’s the next step

Simulate light and shadow

Add box-shadow to icon to simulate light and shadow

.icon-div .icon-img {
    / *... * /

    /* Simulate light shadow */
    box-shadow: 5px 5px 10px rgba(121.130.160.0.55),
    -5px -5px 10px rgb(255.255.255);
}
Copy the code

Effect is remarkable

Click feedback, press state

Set click feedback, reverse the shadow, make the icon smaller, simulate the press, and add a transition

.icon-div .icon-img img {
    transform: scale(1);
}

.icon-div .icon-img:active {
    /* Shadow reverse */
    box-shadow: 0 0 0 rgba(0.0.0.0),
    0 0 0 rgba(0.0.0.0),
    inset 5px 5px 10px rgba(121.130.160.0.55),
    inset -5px -5px 10px rgb(255.255.255);

    /* Add transition */
    transition: box-shadow 50ms ease-out;
}

.icon-div .icon-img:active img {
    /* Icon zoom out */
    transform: scale(0.98);
    transition: transform 50ms ease-out;
}
Copy the code

Extract variables for easy configuration

In CSS write a :root selector, write some variables, easy to configure

Replace the response variable with var(…) We have to do is

:root{-color-background: #ebecf0;
    --color-icon-bg: #ebecf0;
    --color-label: slategrey;
    --color-light: rgba(121.130.160.0.55);
    --color-shadow: rgb(255.255.255);
    --duration-ani: 50ms;
}

.icon-div .icon-img {
    /* Simulate light shadow */
    box-shadow: 5px 5px 10px var(--color-light),
    -5px -5px 10px var(--color-shadow);

    /* Add transition */
    transition: box-shadow var(--duration-ani) ease-out;
}
Copy the code

Another dark color configuration

:root{-color-background: #3B4046;
    --color-icon-bg: #2D343C;
    --color-label: #777A7D;
    --color-light: #272a2e;
    --color-shadow: #595a5c;
    --duration-ani: 50ms;
}
Copy the code

The complete code

<! DOCTYPEhtml>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>New mimicry button</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        :root{-color-background: #ebecf0;
            --color-icon-bg: #ebecf0;
            --color-label: slategrey;
            --color-light: rgba(121.130.160.0.55);
            --color-shadow: rgb(255.255.255);
            --duration-ani: 50ms;
        }

        html.body {
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;

            background-color: var(--color-background);
        }

        .icon-div {
            width: 100px;
            height: 160px;

            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
            align-content: center;

            user-select: none;
        }

        .icon-div .icon-img {
            width: 100px;
            height: 100px;

            /* A proper rounded corner */
            border-radius: 20px;

            /* Close to background color, low contrast */
            background-color: var(--color-icon-bg);

            display: flex;
            align-items: center;
            justify-content: center;

            /* Simulate light shadow */
            box-shadow: 5px 5px 10px var(--color-light),
            -5px -5px 10px var(--color-shadow);

            /* Add transition */
            transition: box-shadow var(--duration-ani) ease-out;
        }

        .icon-div .icon-img img {
            width: 60px;
            transform: scale(1);
            transition: transform var(--duration-ani) ease-out;
        }

        .icon-div p {
            color: var(--color-label);
        }

        .icon-div:hover {
            cursor: pointer;
        }

        .icon-div .icon-img:active {
            box-shadow: 0 0 0 rgba(0.0.0.0),
            0 0 0 rgba(0.0.0.0),
            inset 5px 5px 10px var(--color-light),
            inset -5px -5px 10px var(--color-shadow);
        }

        .icon-div .icon-img:active img {
            transform: scale(0.98);
        }

    </style>
</head>
<body>

<div class="icon-div">
    <div class="icon-img">
        <img src="./icon/ linear magnifier search.png"/>
    </div>
    <p>search</p>
</div>

</body>
</html>
Copy the code