CSS3 毛玻璃实际效果

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

毛玻璃实际效果做的好能使网页页面显得十分生动立体式。立即上图

body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 serif;
    background: url("iphone.jpg") fixed 0 center;
    background-size: cover;
}
main {
    margin: 0 auto;
    padding: 1em;
    max-width: 30em;
    border-radius: .3em;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    background: hsla(0,0%,100%,.3);
}

<main>……</main>

去掉那些式样层面的编码,上面完成毛玻璃实际效果的关键编码以下:

body {
    …
    background: url("iphone.jpg") fixed 0 center;
    background-size: cover;
}
main {
    …
    background: hsla(0,0%,100%,.3);
}

自然这个实际效果离大家的期待也有点间距,由于单纯性的30%的全透明度会让文本变的无法阅读文章。对网页页面来讲情况图只是起清理功效,文本才是最关键的。你能够增大全透明度的百分比,但这样网页页面会显得很呆板。以便让文本便于阅读文章,又维持网页页面的生动开朗,能够对上面的mian标识的情况做模糊不清解决。

你将会尝试blur滤镜,但可是的是实际效果不对:

main {
    …
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

用blur滤镜会将文本也模糊不清掉,更看不清了,只能舍弃。正确的做法是给mian标识提升伪元素::before,在伪元素上应用blur滤镜:(以便实际效果演试,再加了鲜红色情况色)

main {
    position: relative;
    …
}
main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: ⑴;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    background: rgba(255,0,0,.5);
}

能够看出blur实际效果是出来了,但致使了两个难题。最先因为blur出現了外黑影,这个较为好处理,要是再加 overflow: hidden; 就可以了。其次4周20px的模糊不清半径范畴内模糊不清实际效果会慢慢消散。假如对此较为在意,想让4周的模糊不清实际效果和正中间1样,能够将伪元素规格外扩20px,以便商业保险起见,能够略微再外扩1点到30px:

main {
    …
    overflow: hidden;
}
main::before {
    …
    margin: ⑶0px;
}

最终将伪元素的鲜红色情况色更换成body的情况图便可,实际效果以下。你还可以点一下 这里 ,右键查询详细的源码。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。