Научит вас использовать CSS3 для создания нового миметического пользовательского интерфейса.

CSS
Научит вас использовать CSS3 для создания нового миметического пользовательского интерфейса.

Что такое Неоморфизм?

Английское название неоморфизма — «Neumorphism», представляющее собой комбинацию New+Skeuomorphism и также называемое «Soft UI». Проще говоря, неомим — это графический стиль, имитирующий реальные объекты для придания реалистичности UI-элементам интерфейса.

В первой половине этого года неомимитирующий дизайн пользовательского интерфейса был в моде, и он был провозглашен одной из самых горячих тенденций дизайна пользовательского интерфейса в 2020 году, набирающей популярность в Интернете. Neo-mimetic сочетает в себе приемы миметики и графического дизайна, чтобы имитировать форму реальных объектов и придать реализм элементам пользовательского интерфейса интерфейса.Это реалистичный стиль и новый стиль дизайна, который стоит изучить. Он гладкий, детализированный и с ним действительно весело работать. Поэтому в этой статье я научу вас, как использовать CSS3 для реализации неомиметических элементов пользовательского интерфейса, и поделюсь некоторыми примерами веб-сайтов, использующих неомиметический пользовательский интерфейс.

White Soft UI White Soft UI

источник

Неоморфный стиль зародилсяdribbble(Международная основная платформа для обмена проектными работами)Alexander PlyutoОн дизайнеры, чтобы поделиться некоторыми дизайнерскими работами. Один из этих новых стилей работы с использованием мимикрии взлетел до Dribbble 2019 Nian POP и занял первое место по популярности.

развитие

Хотя нынешний стиль неомимикрии очень популярен, он ограничен только кругом дизайнеров, и до его реального применения еще далеко. Многие отечественные производители также изучают и пробуют новый миметический пользовательский интерфейс, и некоторые новые миметические фигуры также можно увидеть на некоторых веб-страницах крупных производителей, таких как Baidu и Tencent. Такие какГлобальная конференция Tencent по цифровой экологиивеб-сайт.

принцип

Для самого основного «эффекта приподнятости» и «эффекта провисания» карта должна использовать тот же цвет фона, что и цвет фона страницы, разница в том, что в первом используется внешняя проекция, а во втором — внутренняя проекция.

  • Показать результаты原理

  • Комбинируйте цвета原理

Реализация CSS

нормальный геймплей

  • Сначала определите два div
<!DOCTYPE html>
<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>
  • раздел CSS
html {
    /* 定义变量 */
    --bgColor: #ff5353;

    /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
    --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
    --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
}

/* 设置一些页面的布局样式 */
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;
}

/* 主要部分 */
.left {
    /* 设置外阴影 */
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
}

.right {
    /* 设置内阴影 */
    box-shadow: inset var(--blackShadow),
                inset var(--whiteShadow);
}
  • Эффект原理

Продвинутый геймплей

  • Определите два DIV
<!DOCTYPE html>
<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>
  • Раздел CSS (изменить ориентацию тени)
    html {
        /* 定义变量 */
        --bgColor: #ff5353;

        /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(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);
    }

    /* 设置一些页面的布局样式 */
    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;
    }

    /* 主要部分 */
    .left {
        box-shadow: inset var(--blackShadow2),
                    inset var(--whiteShadow2);
    }

    .right {
        box-shadow: var(--blackShadow2),
                    var(--whiteShadow2);
    }
  • Эффект原理

более продвинутый геймплей

  • Определите два 4 div, на этот раз два правых вложенных двух левых
<!DOCTYPE html>
<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>
  • Раздел CSS (изменить ориентацию тени)
html {
    /* 定义变量 */
    --bgColor: #ff5353;

    /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(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);
}

/* 设置一些页面的布局样式 */
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;
}

/* 主要部分 */
.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;
}
  • Эффект原理

Суммировать

  1. Используйте переменные CSS3 во время разработки, чтобы легко настроить новый миметический стиль всей страницы.
  2. Ключевой частью приведенного выше кода является определение и использование Shadow.
  3. Есть и другие способы игры, например: использование градиентных цветов
Категории