CSS3图片倒影技术

转载 2016年08月30日 09:39:58

有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

  实现倒影的基本语法

  实现倒影的基本语法非常的直观,假设我们想给下面的图片增加倒影效果,可以这样写:

  img {

  -webkit-box-reflect: below;

  }

  

\

 

  上面这个例子中倒影出现了图片的下方,但实际上我们也可以将倒影安置在左侧、右侧或上侧。

  倒影偏移量

  Offset属性值用来定义图片和倒影影像之间的间距。参考下面的代码:

  img {

  -webkit-box-reflect: below 10px;

  }

  上面的代码中,我们使图片和倒影影像之间相聚10px;

  

\

 

  给倒影增加消隐效果

  在现实生活中,倒影的出现通常是上半部比较清晰,下面半部逐渐消隐。为了在CSS中实现这种效果,我们需要运用CSS3渐变色(Gradients)功能,就像下面这样:

  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

  这段代码就能达到这样的效果:

  

\

 

  我们还可以使用color-stop来控制色彩过渡,让倒影更加漂亮:

  img {

  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));

  }

  

\

 

  火狐浏览器中倒影的实现

  目前只有Webkit浏览器(谷歌浏览器和Safari浏览器)实现box-reflect属性。为了在火狐浏览器中也实现倒影功能,我们需要寻找另外的途径:使用-moz-element()方法。这个方法能够复制指定网页元素的内容。让我们来看看下面的例子:

  我们把图片包裹着一个ID是someid的

里。

 

  并且,为了存放倒影影像,我们将使用:before伪元素,就像下面:

  #someid {

  position: relative;

  /* 给倒影留下空间 */

  margin-bottom: 120px;

  }

  #someid:before {

  content:""; /* needed or nothing will be shown */

  background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px,

  -moz-element(#someid) 0px -127px no-repeat;

  -moz-transform: scaleY(-1); /* flip the image vertically */

  position:relative;

  height:140px;

  width: 360px; /* 需要 > image width + margin + shadow */

  top: 247px;

  left:0px;

  }

  这里的-moz-transform是一个负值,作用就是让复制过来的图形上下颠倒,达到倒影的效果。为了让:before伪元素跟原始图形相配合,我们需要移动它的位置。这里的背景偏移量 (-127px)是:before伪元素高(140px) – (图片的高 (247px) + div的border (20px))。需要注意的是,火狐浏览器版的倒影实现只能用在页面的背景是真实背景。背景色要和:before伪元素使用的渐变色的颜色一致。

  因为所有的属性都是来实现倒影的,而且这些属性都有火狐浏览器独有的前缀,和Webkit的倒影不冲突,所以在代码在可以把两个版本倒影方法都写上,保证两种浏览器里都有效果。

  视频倒影

  官方文档中说当倒影的实体内容变化时,倒影的内容也会相应更新。因此,这种技术用在视频是有特殊的效果。

  CSS倒影技术在火狐浏览器中的小问题

  有时,火狐浏览器生成的渐变色图形会比背景元素稍微小一些,导致有一些间隙线出现。为了避免这种情况出现,在:before伪元素的顶部和底部加1px的padding,并且分别设置背景的裁剪方式和原点:

  padding: 1px 0px;

  background-origin: border-box, content-box;

  background-clip: border-box, content-box;

 原文地址: http://www.aseoe.com/show-11-867-1.html


CSS3图片倒影技术实现及原理

目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Pr...

CSS3图片倒影技术

目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor ...

使用css3 box-reflect设计倒影效果

使用css3 box-reflect设计倒影效果 摘要: 说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资...

HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)

(6)text-align-----文本对齐方式 A、text-align :Left;左对齐 B、text-align :right;右对齐 C、text-align :center;居中 D、te...

CSS3 box-reflect 倒影效果

今天看一个有趣的3D案例的时候,看见这样一串代码,可以做出倒影效果,刚开始我还是看不懂的。 -webkit-box-reflect: below 8px -webkit-linear gradie...

CSS3 box-reflect(倒影效果)

之前那只能使用PS先将倒影设计好,然后再利用其进行开发。现在box-reflect属性可以进行图片、文字甚至视频等的倒影制作。但是!目前只在webkit浏览器下支持!需要加上私有前缀-webkit- ...
  • macanfa
  • macanfa
  • 2016年07月06日 22:49
  • 518

css3渐变、倒影、过渡 20160526

css3渐变、倒影、过渡

2016.3.16__CSS3渐变_倒影_过渡_2D变形_3D变形__第十天

CSS3高级属性今日课程预览 1. 渐变1.1 线性渐变为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。语法...
  • MR_LP
  • MR_LP
  • 2016年03月16日 22:06
  • 1526

CSS3_Node2_背景渐变&蒙版&倒影

-->CSS3 背景    背景原点控制、背景剪切控制、透明背景、渐变背景 -->CSS3 蒙版     渐变与蒙版、基本蒙版、形状蒙版、渐变蒙版 -->CSS3 倒影 倒影、渐变倒影 一、CSS...

CSS3制作文字半透明倒影效果

效果如图。Ps、背景线条是背景图勒,和本文效果无关。。。 html代码如下: Html代码   div class="content">  h3 title="专业技能">专...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3图片倒影技术
举报原因:
原因补充:

(最多只允许输入30个字)