今天在使用icloud的时候，看到苹果icloud官网上的毛玻璃效果非常好。 我仔细研究了它的实现方法，就是用js配合background-image: -webkit-canvas来绘制毛玻璃背景图。
不过明天我会仔细研究一下css3中的blur方法css3 毛玻璃，可以达到同样的效果。并且用JS，可以实现模糊缩放的疗效
根据
我们先看一下blur属性的表达：
filter：blur（add=add，direction，strength=strength）
我们看到blur属性有三个参数：add、direction、strength。
Add 参数有两个参数值：true 和 false。 意思是指定图片是否变为模糊效果。
Direction 参数用于设置模糊的方向。 模糊修复是按顺时针方向进行的。 其中0度表示垂直向下css3 毛玻璃，每45度为一个单位，默认值为向左270度。 角度和方向的对应关系见下表：
例子
CSS代码
.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */ }
HTML部分
其中，blur(10px)中的大小决定了模糊图像的大小和模糊程度
明天群里同志们正在讨论css3内光的疗效，所以我自己研究一下，写一篇疗效，涉及到css3投影、渐变、mask、伪类等知识点，现在写下设计思路仅供参考。 先发个疗效图给你看看：
通常我们使用css3的box-shadow来实现盒子投影，text-shadow来实现文字投影，box-shadow来设置方形包的投影，raidus让包形成圆角，看起来非常光滑舒适。 通常的写法是这样的：
-moz-box-shadow:1px1px5px#000;
1px（水平倾斜）1px（垂直倾斜）5px（阴影羽化）#000（颜色）；
当偏转量为正数时，向相反方向偏转。 尝试一下你就会明白。 这里没有地图。
这就是通常的投影效果。 如果是内阴影，则添加“inset”属性，写法如下：
-moz-box-shadow:inset1px1px5px#000;
这样，PS表面的内阴影就创建好了。 效果很好很实用。 如果需要内发光的效果，背景颜色要深，投影颜色要浅，这样会有发光的感觉，而背景颜色深，投影颜色浅。 这看起来像一个投影；
不过，上面群里讨论的是文本的投影，前面只是顺便提一下，下面是题外话：
文字使用text-shadow来形成阴影，但是形成的时候可以跟随文字的轮廓投影，如下图：
文本阴影：2px2px1px#000；
如果使用box-shadow，效果如下：
会按照放置文本容器的包进行投影（我已经设置了容器的长度为200px，背景色没有设置为透明），不会沿着文本的轮廓投影，且疗效不是我们想要的；
但 text-shadow 没有 inset 属性，所以这很棘手。 如何同时实现文字的内投影和文字的渐变呢？
一层一层的，通常PS处理文字的效果是一层层剥离的css3外发光，从文字的内发光开始：
我写了一页的笔试，代码如下：
上海龙
或者您可以下载此代码页，瞧：
疗效图如下：
内投影的疗效非常显着，非常积极，只要稍微改造一下，内光就会出现，啊哈哈……笑了，我们先来分析一下实现原理：
由于内投影无法在一个div层中实现，所以多用几层，并且html中不要添加多余的标签，所以我很自然地想到了使用伪类，所以我用了一个:after,content来写上面和div上面的文字一样，但是结果却是一模一样的样式（之前写的是空格，没有写文字）；
我相对定位了 .text 图层，并在其中绝对定位后叠加了 .text: 。 由于风格相同，所以完全重叠。 然后我尝试使用text-shadow来做效果，文字本身的颜色比投影高。 如图所示：
文字颜色本身是纯色的，我觉得处理起来会很麻烦，所以我下意识的用rgba隐藏了，并且把文字的alpha设置为0。这里用rgba是因为我只想隐藏的颜色层文本本身。 如果使用 opacity 的话，整个图层都会消失； 所以我使用 color:rgba(0,0,0,0); 以达到疗效。 如果是用.text写的话，会隐藏.text文本本身的颜色层，同时。 它将继承这个隐藏属性。 如果你只是想隐藏.text:after，那么就写在.text:after上，这样.text本身的颜色层就会被保留； 然后在 .text# 000000 中使用 text-shadow:0px0px0px; 投影无偏且非羽化的实体投影基色，然后投影 .text:after 投影图层。 ps对选区进行羽化时，是以选区边界为中心，向两侧羽化。 如果羽化值为10px，那么左右各为5px，那么以选区边界为中心的10px像素范围会强化从不透明到完全透明的过渡，如图：
中心为蓝色，背景为红色。 羽化时，不透明的白色区域也呈现半透明状态，并与蓝色背景混合变成红色。 但这么多羽毛的东西有什么用呢？ 有用，如果我们把背景色设置到某个区域的话，如果里面的图层被羽化了，会出现什么情况呢？ 看看下面的ps图你应该就明白了：
底部是白色明文“广州”。 然后我复制了另一个视口并将其光栅化，并用高斯模糊了它。 结果，透过底部可以看到模糊层，听到部分红色纯文本与前面的白色半透明区域融合在一起，视觉上感觉像是有一个内阴影。 这就是我实现纯css3内辉的原理：一个.text纯文本图层，一个.text:after在投影中分层形成一个内辉视觉错觉，这就是为什么文字颜色要设置为透明的，如果文字本身有颜色，那么半透明就会被遮挡，那么背景颜色也会被遮挡，和普通投影没有区别。 不过这种方法有缺陷，但却是致命的，那就是如果羽化超过边界，就会出现羽化白色。 如果把投影黑换成黑色，这样就会和背景融为一体，效果就没啥可说的了，而且如果用了和背景色相差太大的颜色，这让我觉得恶心，但是可以调节成“外发光”效果，这是人为的。
内光的基本讲解完了，下面我们来说说渐变，虽然我在之前的博客中提到过CSS3渐变和CSS3画水晶纹理按钮。 上一篇博客主要提到了渐变的基本写法和遮罩的使用。 如果您有兴趣，可以链接到它并查看。
不过，渐变色通常只适用于背景色，即方框，对文字不起作用。 网上有很多文章解释CSS3文本渐变。 这是我的原创。 整理完之后我会再写一篇文章。 写《CSS3渐变》，先买个预览……
如果只用蒙版来做css3外发光，颜色会比较单调，而且只有黑白调整，所以渐变过渡比较难发音，所以我采用分层的方法，用用于实现层之间颜色融合的遮罩。 为了实现渐变，我什至使用了 :before，但这样就有 3 层可供我使用。 我仍然使用.text作为基色，.text:after mask实现渐变，.text:before提高渐变效果。 同时实现了内光，具体代码如下：
只需 169.99 美元
阿德法斯德夫
或者您可以单击此链接下载代码页，瞧：
具体方法是在.text中设置高亮背景色#c60000，为.text:after使用遮罩，从上到下拉一个从透明到不透明的垂直渐变遮罩，将颜色设置为白点的#ea0000，然后在.text:before :rgba(0,0,0,0)中设置颜色；内部光照需要透明度，然后设置投影为text-shadow:0px0px5pxrgba(110,0,0,0.8);较深的颜色#6e0000，混合一点透明度如果调整内发光效果效果会更好，你会发现每层都有一个文字阴影，而且直径很小，因为网页上的文字是锯齿状的，这样做的话，文字周围就会有一点投影来羽化边框，看起来比较柔和，有消除锯齿的效果，最终的效果就会下来。 但由于FF不支持图层蒙版，所以渐变效果只能在webkit内核下的浏览器中看到。 FF看起来有点像..如图所示：
没有遮罩效果，所以是前面.text:before的颜色，但是内发光和投影还在，效果勉强可以接受。 然后就是传说中的IE，在IE鬼神里看起来更震撼，这里就不截图了，我回家自己看看疗效吧……哇卡卡……
虽然现在在实际项目中还没有使用，而且可以看出这样的效果节省了大量的图片资源，但是几个字的标题其实节省的并不多，而且如果一个网站出来了，所有的标题都可以了用css编写，所以令人印象深刻，而且可扩展性也很强。 要改变文字，只需要在DW中修改文字即可，非常方便。
文章来源：
发表评论