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

 
 
背景区域的毛玻璃效果。
 
把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。
 
用语言来描述就是:父元素设置position:relative,其伪元素(after或者before)设置 position:absolute,并且让top,bottom,left,right都为0,伪元素占满父元素的整个空间,最后设置z-index将背景放在父元素后边。
 
具体代码如下。
 
 
 
什么意思呢?稍安勿躁,我会在接下来的两个实战例子中对这段代码的意思一一道来。
 
文章结构:
 
1.导航条  
1.1:平行四边形导航条  
1.2:梯形导航条
 
2.毛玻璃效果
 
3.结束语
 
4.参考文章
 
1.导航条
 
1.1:平行四边形导航条
平行四边形制作的思想:平行四边形的制作运用了CSS3 2D 变形中的skew()倾斜属性,因为我们只是在水平方向上倾斜,所以在使用skew()时需要将第二个参数指定为0,否则x,y轴方向都会发生倾斜,这并不是我们想要的效果。或者是使用skewX()。具体的代码实现如下。
 
平行四边形导航条HTML
 
 
 
 
上面代码中,只显示了部分重要部分。在设置平行四边形的时候需要注意以下几点:
 
1.给 li 元素设置relative,然后伪元素after设置absolute和LRBT四个方向的定位。原因在于我们需要让伪元素相对与 li 元素定位,并且让伪元素填满整个 li 元素的空间,这样的话给伪元素设置的背景就会铺满整个 li 元素 。最重要的是,在伪元素上设置skewX(),只会对伪元素进行倾斜,并不会对父元素上的文字进行倾斜。
 
2.设置z-index:-1。这里如果不设置z-index值为负值的话,就看不到在 li 元素里面的文字了,因为absolute会提高自身元素的层级,所以要让伪元素z-index为-1,让其的层级位居 li 元素之后。
 
3.使用skewX()函数让 伪元素(不是 li 元素) 元素旋转 25度,注意写上属性前缀,防止浏览器兼容性问题。
 
4.将伪元素和伪类结合使用的时候,必须要注意的是先伪类,再伪元素。如果是li::after:hover 这样设置的话是没有任何效果的。正确的写法:li:hover::after。
示例效果如下。

 
 

 
 
(hover状态)
1.2:梯形导航条
 
梯形导航条的是实现思想:梯形导航条使用了CSS3 3D 变形中的三个属性:perspective(),rotateX()和transform-origin。
 
perspective()是用于设置用户和元素3D空间Z平面之间的距离,值越小,用户与3D空间Z平面距离越近,视觉效果会明显;反之,值越大,用户与3D空间Z平面距离越远,视觉效果越小。
 
ratateX()是用于3D空间中x轴的旋转,大家可以想象一下在高中时期学的空间直角坐标系,跟那个x轴的旋转是一样的道理。
 
transform-origin是用于指定元素的旋转中心点位置。具体属性的使用方法可以去查阅相关文档,这里就不再赘述了。具体代码实现如下:
 
梯形导航条HTML
 
 
 
JS代码
 
 
 
 
 
上面代码中,只显示重要部分。注意以下几个问题:
 
1.前四个问题与平行四边形导航条的制作思路基本相同。其中,在伪元素上设置perspective()和rotateX(),只会对伪元素进行3D处理和在空间中X轴的旋转,并不会对父元素上的文字进行任何的处理。文字还是会按照默认效果显示。如果在父元素上设置perspective()和rotateX(),则会影响之后的所有子元素。也就是所有的子元素(包括文字)都会进行旋转。文字被旋转了,阅读十分困难的。这个逻辑应该不难理解。
 
2.用于控制梯形是左倾斜还是右倾斜的属性是transform-origin。梯形不倾斜:bottom。左倾斜:bottom left;右倾斜:bottom right。
示例效果如下:

 
 

 
(切换状态)

 
(左倾斜)

 
(右倾斜)
 
2.毛玻璃效果
 
毛玻璃的实现思想:毛玻璃使用了CSS3中的backgroung-size,fiter滤镜的原理。
 
background-size属性用于指定背景图片的尺寸,其中的一个参数cover是将背景图片放大,以适合铺满整个容器。但是这个属性使用的前提是需要设定一张足够大尺寸的图片,否则会导致背景图片失真。
 
fiter滤镜中的blur()用于将图片进行高斯模糊处理,只接受单位值,值越大,模糊效果越明显。
 
在张老师的一篇关于毛玻璃实现的文章中(会在参考文章中给出链接),给出了毛玻璃实现的效果,可是有一些小问题:如果在背景图片上加上文字,blur()会将文字一起模糊掉,这样的话会用户体验不太好。当然,在不需要文字的背景图片下,张老师的方案还是很棒的。
以下给出具体代码:
 
毛玻璃HTML
 
 
 
 
上面代码中,需要注意几个问题:
 
1.同样这里也是使用父元素relative,伪元素absolute的方法,并且设置了TBLR和z-index。使用这种方法的关键之处在于我们是对伪元素进行了blur()处理,这样并不会影响到父元素中的文字效果。
 
2.需要给背景图片添加background-size属性,这个是为了让图片自适应整个屏幕的宽度。另外,这个属性需要添加两次。一是在body元素上,一是在伪元素上。在伪元素上添加的原因是我们要让blur()处理模糊的图片与背景图片相同。如果在伪元素中给background设置inherit的话,只会继承父容器rascal的背景,而rascal容器是一个白色背景的容器,这样就与我们的效果不相同了。下图是在伪元素中使用background:inherit;的毛玻璃效果。这并不是我们想要的毛玻璃效果。所以伪元素上background的设置应该与背景图片是相同的。
 
3.在为伪元素设置正确的background之后,我们要使用margin负值模糊边缘消退的问题。
 
可以看到,毛玻璃中的blur()效果有点过犹不及了,一圈模糊效果超出了容器,给父元素设置overflow:hidden,可以将超出的部分剪切掉。最终的示例效果如下。
 
最终效果看起来就很自然了。
 
3.结束语
 
三个实例中,有一个共同的思想:将CSS3的倾斜,透视,旋转和滤镜效果都放在伪元素中,并且给父元素设置relative,伪元素设置absolute,让伪元素的宽度和高度撑满父元素的整个区域,最后设置伪元素的z-index为负值。这样做的好处就是不会影响父容器中的文字。
 
具体的代码如下:
 
 
 
 
本文转载自分针网

分针网—IT教育:使用CSS3制作导航条和毛玻璃效果的更多相关文章

  1. 使用CSS3制作导航条和毛玻璃效果

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

  2. 分针网—IT教育: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  3. 分针网—IT教育: Html / CSS常见问题的解决方案

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  4. 分针网—IT教育:作为PHP开发人员容易忽视的几个重点

    无论是学习什么样的一个开发.ASP开发.java开发.当学习还不是很久的时候,一般都是不知道它们的精华是在哪里,而现在很多的php程序员也是不知道PHP的精华所在,为什么perl在当年在商界如此的出名 ...

  5. 分针网—IT教育:调皮的JavaScript

    JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScr ...

  6. 分针网—每日分享:HTML解析原理

    标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理   这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了...   以下部分来自hand ...

  7. 分针网——每日分享: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  8. 分针网—每日分享: 怎么轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.   我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...

  9. css3制作惊艳hover切换效果

    css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

随机推荐

  1. 时间同步ntp服务的安装与配置(作为客户端的配置

    在linux环境下,我们不仅可以自己设置时间,也可以对系统进行时间的同步,比如同步时间到某台物理机上或虚拟机,皆可!接下来我们就以同步时间到某台物理机为例, 一起学习学习. 1.配置本地yum源(挂载 ...

  2. XML 特殊字符

    XML转义字符 以下为XML标志符的数字和字符串转义符 "     (" 或 ") '     (' 或 &apos;) &     (& 或 & ...

  3. 使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别。

    注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额 ...

  4. WAMPSERVER PHP版本5.3的降到 5.2?

    在这里下载5.2版本PHP,http://sourceforge.net/projects/wampserver/files/WampServer%202%20-%20Extensions/PHP/下 ...

  5. 【算法和数据结构】_12_小算法_abs_fabsf_fabsd_大端小端判断

    最近学习要用到求绝对值函数,看了一下有很多种的abs函数,因此想自己实现这些代码. 下面是我进行测试的代码: #include <stdio.h> typedef unsigned int ...

  6. linux_shell_4_shell特性

    去年的这个时候,我曾经写过一些关于shell特性的文章,下面是第3篇:linux_shell_3_shell变量特性. 今天我们继续来学习一些关于 Linux shell的内容. [1]shell 在 ...

  7. MySQL 系列(五) 多实例、高可用生产环境实战

    MySQL 系列(五) 多实例.高可用生产环境实战   第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 史上最屌.你不知道的数据库操作 第三 ...

  8. jsp_设置文件编码

    jsp有两种方法可以设置文件编码: (1)<%@page language="java" contentType="text/html;charset=utf-8& ...

  9. 夺命雷公狗—angularjs—13—post参数的接收发送

    我们强悍的angularjs为我们不仅仅提供了他的get接收方式,而且也有post的接收方式,我们现在做一个模拟接收后端传递过来的json的数据: <?php $arr = ['user'=&g ...

  10. Report_矩阵报表的实现(案例)

    2014-05-31 Created By BaoXinjian