先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜: .content { background-color: rgba(0,0,0,0.3); -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur…

透明度: 1.opacity    背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2);   只是背景颜色透明,字体不透明 代码: .info{ background-image: url(pineapple.jpg); width:300px; height:300px; } p{ background-color: rgba(255,255,255,0.8); opacity:0.2; height:100px; } 毛玻璃效果:CSS filter…

一.美工出图 二.第三方框架 -- DRNRealTimeBlur,框架继承自UIView.使用方法:创建UIView直接继承自框架的View,就有了毛玻璃效果 三.CoreImage -- 图片加高斯模糊 四.添加UIToolBar控件…

最近暴雪一款叫<守望先锋>的游戏火到不行,身边很多人都深受其毒害,虽然博主自己没有买(穷),但是耳濡目染也了解了个大概. 由于之前大致学习了一下 css 滤镜的各种用法,所以心血来潮结合二者做一个 DEMO. 大家应该见过一种“选人”效果,一排黑白或其他单色的角色照片,选中的角色照片变为彩色.我想即使没有在网页中见过,在其他地方也一定见过. 亲切吗?就是上图这种. 那在 web 中该怎么实现呢,很多人会认为用两张图片,一张黑白一张彩色,切换图片地址.这种方法随便想想就有很多弊端,其实 css…

1. 使用 :not() 为导航添加/取消边框 传统的方法为导航栏添加边框: /* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; } 用css的:not()实现: .nav li:not(:last-child) { border-right: 1px solid #666; } 减少了很多代码实现了相同的功能…

1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {;; } table {; } fieldset,img {; } address,caption,cite,code,dfn,em,stron…

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

去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆 出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之(不记得了),国外也有之(比方说CSS tricks上的这篇”lurry Transparent Header Effect…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世…

实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for…