css毛玻璃背景的制作

  • 今天早上, 听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~
  • "雾里看花"代表了一种"朦胧美", 如果你喜欢朦胧美, 那你也可能也会喜欢毛玻璃
  • "毛玻璃"效果, 本质上是对背景图片的部分区域进行模糊运算, 比如我们在photoshop经常使用的高斯模糊, 这种模糊其实是在UI设计中非常常见, 比如Mac上的siri

  • Mac上siri的毛玻璃效果


  • 对图片动态地进行模糊运算, 是需要消耗一些性能的, 原来这种模糊效果只被用于软件的设计中,随着浏览器技术的进步, 以及GPU运算能力的提升,这种模糊效果, 开始被用于网页的设计中

原理和photoshop修图的步骤类似, 用css中的blur滤镜实现高斯模糊, 对文字部分添加伪元素,对伪元素填充部分背景图片, 并添加模糊效果

  • css实现模糊效果, 与photoshop类似, 但略有不同, css通过postion:fixed来实现背景图片与伪元素对应部分图片的重合
  • css的玩法和photoshop进行平面设计的思维方式很类似, css通过逐步添加样式, 实现效果, Photoshop也是通过一步步操作的叠加,实现最终的效果
  • css与Photoshop的不同之处在于, css的样式顺序可以随意摆放, 而photoshop的操作步骤有一个严格的操作顺序

html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>毛玻璃效果</title>
</head>

<style>
    body {
        margin: 0;
    }
    
    main, .wall::before{
        background: url("http://fangyuanxiaozhan.com:10080/zhaoolee/images/raw/master/mk.jpg") 50% / cover no-repeat fixed;
    }

    main{
        height: 100vh;
        width: 100%;
    }

    .wall {
        width: 380px;
        position: absolute;
        top: 20%;
        left: 10%;
        padding: 10px;
        color: #A84631;
        border-radius: 20px;
        overflow: hidden;
        z-index: 2;
    }

    .wall::before {
        content: '';
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        filter: blur(10px);
        margin: -20px;
        z-index: -1;
    }
    
</style>

<body>
    <main>
        <div class="wall">
                <p style="font-size: 20px">
                    打破次元壁?
                </p>
                与其说想打破次元壁, 进入二次元,不如说你已经厌倦了三次元人或物的丑的一面,只想获得美的一面。
                <p style="text-align: right">
                    -- 知乎 https://www.zhihu.com/question/47849525
                </p>
        </div>
    </main>
</body>
</html>

  • 对于人类而言, 使用css和Photoshop的思维方式是类似的, 将自己想要展现的效果, 拆解为有限的步骤, 然后将步骤一步一步输入到计算机中
  • 题外话, 人工智能与人类的区别? 以这个毛玻璃效果为例, 人工智能或许能在一瞬间完成这种效果, 而人类需要3分钟, 但人类在3分钟内,可能会涌现更好的想法, 并将想法添加到原本的步骤中, 人类与人工智能的区别想必已经很明显了~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

半圆型饼图制作技巧!!!

今天跟大家分享半圆型饼图的制作技巧! ▽ 我们看惯了普通的圆形饼图,是不是总有一种审美疲劳的感觉。毕竟总是对着同一样的版式看,难免会腻味。今天教大家怎么制作半圆...

39410
来自专栏数据小魔方

可视化基础——色彩篇

今天要跟大家聊一聊关于颜色的话题。 ▼▼▼▼▼▼ 数据可视化的学习需要了解一些简单的色彩理论知识。 对于色彩小编也所知不多,毕竟配色对于专业的设计师来讲都是一...

4618
来自专栏企鹅号快讯

程序猿必备的10款web前端动画插件三

1.一些想法预览或只是在悬停的文件夹上播放 这个想法是在悬停文件夹图标时显示一些动画,并显示某种内容的预览。我们想与你分享一些有趣的小悬停效果。这个想法是显示文...

2588
来自专栏BestSDK

简单几步,教你做一名出类拔萃的配色交互师

前言 很多小伙伴都说自己配色如屎,因为没学过色彩,没画过画,导致每次配色时都小心翼翼的。 然后去网上搜各种配色理论,看了什么冷暖、明暗等术语后开始照着去配色,然...

2954
来自专栏申龙斌的程序人生

零基础学编程017:画出我的公众号LOGO

在《零基础学编程014:小海龟做画》和《零基础学编程015:画些有趣的图案》里,我们已经可以用编程中的循环结构,加上turtle中的前进、转向等指令画些有趣的图...

3116
来自专栏互联网杂技

你的布局设定方法靠谱吗?

本文不适合采用天才设计(Genius Design)方法的人士。 有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的,越细致...

3867
来自专栏留存

获取目标的时间是目标距离和大小的函数。

1954年,心理学家保罗费茨检验人体运动系统,发现移动到目标所需的时间取决于距离,但与其大小成反比。根据他的法律,由于速度精度的折衷,快速移动和小目标会导致更高...

3509
来自专栏数据的力量

吸睛大法!如何突出网页中的关键内容?

我有特别的抢眼技巧!今天的好文非常值得拜读,此文从对比、色彩、字体、留白等方面帮同学们将最关键的内容呈现出来,文末还附上一个特别有效果的检测方法,一眼就能看出你...

911
来自专栏互联网杂技

视觉设计师需要懂的4个设计原理

把你的工作当作一门手艺,因为总有一些你能改进的东西。靠激励自己成为一个更好设计师。 ? 上周,我的一位读者发了一个问题:如何成为一个好的视觉设计师? 正如我在想...

3795
来自专栏腾讯云数据库(TencentDB)

腾讯云图,让数据说话

这是星云图,他表示的是QQ同时在线人数,看到这个图大家脑袋里面想到什么?QQ,蓝钻、绿钻、太阳、月亮、上学的时候跟同学聊天,认识默认网友,你会是这众多闪亮星星中...

1.1K13

扫码关注云+社区

领取腾讯云代金券