CUED-迅雷用户体验设计中心

有趣的CSS3之倒影

流浪君 | 2011-06-15 | 网页重构

有趣的CSS3之倒影

 

  现在看到不少网站都用上了html5、css3的新特性,用这些新特性给页面确实丰富了不少效果,圆角投影渐变啥的对工作的效率也超级给力,像过去都得用图片来实现的效果现在简单的代码即可轻松实现,让复杂的工作一下变的快捷了许多,并且有些看上去的效果犹如是flash动画做出来的般,看了都让人激发下好奇心马上看看源代码学习下这是怎么实现的,下面也就聊聊用CSS3做的倒影效果。

  先上两张截图:

  

  不晓得大家看出这两个图有啥共同点,没错,这聊的是倒影自然就是标题都有用倒影的效果。(貌似设计师都爱这效果,哪里都爱加这个)。

  用常规方法自然是一块图片没说的,现在有CSS3可以看看有没有现成的属性可以挖掘的。

  box-reflect 就是它了。

  

  来看看这张蜂鸟的图片,你能分辨哪个是倒影麽?哈哈,这完全就是像照镜子一样

  来看看它的写法box-reflect: left,一个倒影就出来了,当然这样简单的效果离我们想要的效果还差许多,现实的例子没可能就个很直板的倒过来,就是做出来设计师那边也会好好的批一顿,那我们再好好优化它。下面的例子都是基于webkit核心的浏览器来测试效果。

  代码如下:

-webkit-box-reflect: left 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(transparent), to(white));

  第一个属性 left 是倒影的方向,共有四个属性:above, below, left, right (上下左右)
  第二个单位值是元素的倒影离元素的距离,可以为负值,不过其负值的效果倒影是在元素的下面层级的,不会覆盖本元素。
  后面这个-webkit-gradient 熟悉css3渐变属性的同学一定很了解它了,这里简单介绍下
  linear 是线性渐变,后面的两组数字是颜色渐变的方向,这和我们写背景定位的值很像,它是指由哪往哪开始做渐变效果,数字也可以用英文方位的单纯如:0% 100%,100% 100%, = left bottom, right bottom,后面的 from (…)  to (…)   比较好理解,既刚才定了方向上颜色的取值。

  来看看效果:

  Safari 5.0: Chorme 12.0:

  好像Chorme 12.0对 ‘transparent’ 透明值 的表现不同了,记得之前的Chorme的版本是和Safari 5.0是一样的。先不理版本的问题,至少现在我们有了个倒影的思路,把倒影改个方向,渐变也按照倒影的逻辑改个渐变方向,来看看效果:

代码:-webkit-box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(white));

below:倒影方向在元素的下面,-16px 的单位值是把倒影和元素的距离近些,
渐变方向上的值:0 0, 0 100%,= left top, left bottom, 既方向由上往下,

倒影渐变还不是很满意所以得再稍微优化下:

这和预期的就差不多了,来看看刚才优化的代码:

-webkit-box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white));

加了color-stop(.5, transparent) ,调整了下渐变的终止位置,效果明显好多了。

  除了图片可以做倒影,文字也是可以同样应用这个属性的,来看看文章开头的那截图:

  

  这标题用的效果用刚才介绍的方法可以很快的实现这效果。

  
  来看看代码:(代码省略了字体等别的样式)
  -webkit-box-reflect: below 6px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));

  这倒影倒是有模有样的,就是字体还得加个渐变,来继续优化:

  
  这个效果基本是可以接受的,不过字体大小的问题和ps里的字还是有些区别,把字体改小些露出锯齿型还真丑,先不考虑这个,先看看代码:

  -webkit-box-reflect: below 6px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(170,170,170, .9)), to(rgba(20,22,21, 1)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  这效果基本和设计稿一样了,代码一大堆,先别晕,对文字渐变的原理和倒影倒影差不多,有兴趣的同学可以狗狗或百一下。

  当页面上的标题都用这倒影效果时就是件很省心的事情了,无需再切成图片又合并又定位了,给网站性能的提升、后期维护的便捷带来有大的帮助。不过对于大多数低版本IE浏览器的用户而言这些都是浮云般的效果,不过随着浏览器的发展,大家都按共同标准来整合自家产品的话,浮云终会有散开的一天。

  1. Ju2ender 说:

    目前为止仍只有 Webkit 实现了 box-reflect

  2. zoowar 说:

    难道火狐下不支持吗?

  3. SKY 说:

    哈哈  不错

  4. ufo 说:

    这个是WEB2.0里的,还IE自己的东西?

  5. 游客 说:

    chrome 渐变无效

  6. Demon 说:

    但发现在FF下好像这个效果无法显示 。

  7. 紫吟 说:

    谢谢分享了~~~

发表你的评论