头像
新拟态风格阴影
admin 发表于 2022-03-14 15:04:13

2469 4 0

我们将运用在文字上的技巧,扩展延伸到容器上,就能得到最近比较火的拟态风格阴影,其原理也是大同小异。

两个阴影,使用两个相反的方向,使用两组对比明显的颜色值,来实现凹凸效果。与文字不同的是,这里的凹效果,我们需要使用盒子的内阴影实现。

<div>新拟态风格阴影</div>
<div>新拟态风格阴影</div>
div {
    width: 120px;
    height: 120px;
    background: #e9ecef;
    color: #333;
    box-shadow:
        7px 7px 12px rgba(0, 0, 0, .4),
        -7px -7px 12px rgba(255, 255, 255, .9);
}

div:nth-child(2) {
    box-shadow:
        inset -7px -7px 12px rgba(255, 255, 255, .9),
        inset 7px 7px 12px rgba(0, 0, 0, .4);
}

这样,就可以得到拟态风格的按钮

再通过一个简单的过渡,就可以实现整个点击的交互:

div {
    transition: .2s all;
    box-shadow:
        7px 7px 12px rgba(0, 0, 0, .4),
        -7px -7px 12px rgba(255, 255, 255, .9),
        inset 0 0 0x rgba(255, 255, 255, .9),
        inset 0 0 0 rgba(0, 0, 0, .4);
    
    &:active {
        box-shadow:
            0 0 0 rgba(0, 0, 0, .4),
            0 0 0 rgba(255, 255, 255, .9),
            inset -7px -7px 12px rgba(255, 255, 255, .9),
            inset 7px 7px 12px rgba(0, 0, 0, .4);
    }
}

 

──── 0人觉得很赞 ────
最新回复 (4)
  • 头像
    初心不改 发表于 2022-03-16 15:51:23
    0 引用 沙发
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • 头像
    独乐乐 发表于 2022-04-02 10:53:54
    0 引用 板凳
    看帖必回是好习惯!
  • 头像
    qjc 发表于 2022-05-01 17:06:26
    0 引用 地板
    主题可以哦
  • piaoxue888 发表于 2022-12-23 13:44:06
    0 引用 4楼
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
    • 折腾BBS
      6
        登录 注册 QQ登录