51dev.com IT技术开发者社区

51dev.com 技术开发者社区

毛玻璃

css毛玻璃效果

css毛玻璃效果

毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感。比如:高大上啊,接下来肯定是眼馋手痒的过程。。。当然,用ps搞一个全景毛玻璃背景毫无疑问是最省事的,那接下来就没啥事可干了。当然nonono了。毛玻璃无疑就是种模糊了,少不了filterblur。最终效果(chrome):天气...

CSS遮罩效果和毛玻璃效果

CSS遮罩效果和毛玻璃效果

  本文将详细介绍CSS遮罩效果和毛玻璃效果 普通遮罩  一般地,处理全屏遮罩的方法是使用额外标签<style>.overlay{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.8);}.lightbox{p...

原来你是这样的毛玻璃

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖-->传送门,看了LEAVEROU的《CSS揭秘》后才发现还有更优雅的毛玻璃:<!DOCTYPEhtml><html><head><title>原来你是这样的毛玻璃</title><metacharset="utf-8"...

解决css3毛玻璃效果(blur)有白边问题

解决css3毛玻璃效果(blur)有白边问题

做一个登录页,全屏背景图毛玻璃效果,实现方法如下:HTML:<body>  <divclass="login-wrap">    <divclass="login-mask"></div>    <divclass="login-box"></div&g...

CSS3中毛玻璃效果的使用方法

CSS3中毛玻璃效果的使用方法

今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image:-webkit-canvas的形式绘制出的毛玻璃背景图片。不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果CSS代码....