关于mega弹出框的overlay效果

原创
2016/11/02 15:27
阅读数 101

mega比起百度网盘,功能上少了些,但是,总感觉可靠一些,页面也很精致。国内某些web app容易给人一种粗制滥造的感觉,可能山寨太多了。

这个弹出框给人很惊艳的感觉。 capture shot

.fm-dialog-overlay, .fm-account-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1100;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(20,20,20,0.5)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(20,20,20,0.5) 100%);
    top: 0;
    left: 0;
}

.overlayed .main-blur-block {
    filter: blur(0.25em);
    -webkit-filter: blur(0.25em);
}
.main-blur-block {
    height: 100%;
}

整体结构是模糊层main-blur-block在最外,然后渐变色层fm-dialog-overlay,最后是对话框fm-dialog-overlay。非常美的滤镜效果。

自己实践了一下,因为popup并没有和其他内容分开,所以blur不好加,只能用$("section:not(.pop)")来选中不是对话框的标签并添加class。

.blur-block{
    filter: blur(1px) grayscale(30%);
    -webkit-filter: blur(1px) grayscale(30%);
}
.blur-block {
    height: 100%;
}
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部