css拟态风格尝试以及css3新特性渐变使用

灵感

由于之前偶然间听到拟态风格这个词，那么什么是拟态风格呢。「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软UI）。简单来说就是一种类似浮雕的效果，介于扁平与投影之间。俺总结了一下大致上我理解的css拟态风格是这样的，通过使用阴影以及一些样式的修饰来使得元素达到一个类似于立体的效果，那么我就把它理解为拟态风格的样式。下面贴一张拟态风格的设计图，方便大家对拟态有个直观的概念，当然图片是百度copy的（手动滑稽，俺的审美实在设计不出来）。

实现思路

首先肯定是先将背景调为粉色，然后加入元素，我这边模拟的是登录页的元素，那就是一个登录表单，话不多说，开整。

第一步添加背景色

背景色主要就是就设置body的背景就行，如果你有特殊兼容性啥的需要，你就要将padding和margin都设置为0.

代码

body {
    background-color: rgb(246, 223, 228);
}

效果图

第二步添加元素

这里元素就是一个登录表单，因为框架用的是uni-app的框架，所以用的元素标签是view，而不是div。当然同理，如果是web页面的话就可以用div。

代码

HTML代码

   <view class="card">
            <view class="card__title"> <text>剑开天门</text> </view>
            <view class="flex-row">
                <u-form ref="formRef" class="card__form" :model="form" :rules="rules" label-width="120">
                    <u-form-item label="用户名" required prop="account">
                        <u-input
                            v-model="form.account"
                            type="text"
                            placeholder="请输入用户名"
                            placeholder-style="color:#999"
                        />
                    </u-form-item>
                    <u-form-item label="密码" required prop="password">
                        <u-input
                            v-model="form.password"
                            type="password"
                            placeholder="请输入密码"
                            placeholder-style="color:#999"
                        />
                    </u-form-item>
                </u-form>
                <view class="card__right-space"></view>
            </view>
            <view class="card__login">
                <u-button plain type="primary" @click="login">登录</u-button>
            </view>
        </view>

CSS代码

.card {
    position: absolute;
    z-index: 9999;
    text-align: center;
    bottom: 40%;
    left: 30rpx;
    right: 30rpx;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.3), -10px 10px 10px rgba(225, 225, 225, 1);
    border-radius: 20px;

    &__title {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
    }

    &__login {
        margin: 30rpx 45rpx;
        border-bottom: 10rpx;
    }

    &__form {
        width: 100%;
        margin-left: 45rpx;
    }

    &__right-space {
        width: 45rpx;
    }
}

效果图

扩展之渐变

此刻已经有立体效果了，一个登录页。元素的阴影，以及色彩搭配。那么如果觉得一个色太单一或者是不够有视觉冲击咋办，那么此时可以加入渐变来增加视觉效果，让人感到眼前一亮，那么什么是渐变呢？

css3新特性渐变(Gradient)

Gradient是css3新加的特性。分为线性渐变(liner-gradient) 以及 径向渐变(radial gradient)

线性渐变(liner-gradient)： 沿着一根隐形的轴线，从起点到终点实现颜色的顺序渐变
径向渐变(radial-gradient)：从起点到终点进行圆形的渐变

渐变实现

此刻将背景色改为渐变色试试效果

线性渐变代码

body {
    background: linear-gradient(
        111.4deg,
        rgb(209, 231, 235) 7.4%,
        rgb(238, 219, 199) 51.4%,
        rgb(255, 159, 122) 82.6%,
        rgb(255, 109, 58) 100.2%
    );
}

线性渐变效果图

径向渐变代码

body {
     background: radial-gradient(
        circle at 50% 50%,
        rgb(209, 231, 235) 7.4%,
        rgb(238, 219, 199) 51.4%,
        rgb(255, 159, 122) 82.6%,
        rgb(255, 109, 58) 100.2%
    );
}

径向渐变效果图

渐变与阴影结合使用生成炫酷的拟态样式

介绍完渐变，我们来试试将渐变和拟态结合起来，上面我们已经将背景加了渐变了，下面我们来给背景中的元素加上渐变看看效果

给元素加线性渐变

.card {
    background: linear-gradient(
        111.4deg,
        rgb(209, 231, 235) 7.4%,
        rgb(238, 219, 199) 51.4%,
        rgb(255, 159, 122) 82.6%,
        rgb(255, 109, 58) 100.2%
    );
    position: absolute;
    z-index: 9999;
    text-align: center;
    bottom: 40%;
    left: 30rpx;
    right: 30rpx;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 10px rgba(225, 225, 225, 1);
    border-radius: 20px;

    &__title {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
    }

    &__login {
        margin: 30rpx 45rpx;
        border-bottom: 10rpx;
    }

    &__form {
        width: 100%;
        margin-left: 45rpx;
    }

    &__right-space {
        width: 45rpx;
    }
}

元素线性渐变效果图

给元素加径向渐变

.card {
    background: radial-gradient(
        circle at 50% 50%,
        rgb(209, 231, 235) 7.4%,
        rgb(238, 219, 199) 51.4%,
        rgb(255, 159, 122) 82.6%,
        rgb(255, 109, 58) 100.2%
    );
    position: absolute;
    z-index: 9999;
    text-align: center;
    bottom: 40%;
    left: 30rpx;
    right: 30rpx;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 10px rgba(225, 225, 225, 1);
    border-radius: 20px;

    &__title {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
    }

    &__login {
        margin: 30rpx 45rpx;
        border-bottom: 10rpx;
    }

    &__form {
        width: 100%;
        margin-left: 45rpx;
    }

    &__right-space {
        width: 45rpx;
    }
}

元素径向渐变效果图

线性渐变与阴影结合效果图

径向渐变与阴影结合效果图

总结

总之，一整个耍下来，虽然样式调的不一定好看，但是还是学到一些css知识的。这套思路实现是在app上实现的，但是知识都是css知识，所以在web浏览器端也是能达到同样的效果的，最后希望对大家有所帮助。