转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果. 导航条是梯形形状的.…

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果. 导航条是梯形形状的.…

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果.导航条是梯形形状的.     背景区域的毛玻璃效果.   把导航条和毛玻璃效果在一篇文章中分享其实是有原因的.因为这两个效果的实现离不开一个重要的思想.   用语言来描述就是:父元素设置position:relative,其伪元素(after或者bef…

去年盛夏之时,曾写过“小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不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世…

大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置导航列表的宽度..nav{width:8em;} 讲锚的display属性设置为block,这样就可以给它设置宽高了,设置height后与line-height保持相同,达到文字垂直水平居中. 去除链接下划线 ,a{text-decoration:none} 去除最后一个链接的底边框与列表的底边框形…

先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的过程中遇到的一个类似的小问题.其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊.所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? 定义需求 我们定义一下简单的规则,要求如下: <ul> <li>不可思议的CSS</li> <li>…

<pre name="code" class="css">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: pro…

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…

/** * 配置公共的属性,该属性作用于所有的导航条界面; */ - (void)configureConmmonPropety { //1.设置导航条的颜色 self.navigationController.navigationBar.barTintColor = [UIColor yellowColor]; //2.关闭导航条的毛玻璃效果. self.navigationController.navigationBar.translucent = NO; //3.隐藏导航条 self.na…