css3倒影-创新互联
现在看到不少网站都用上了html5、css3的新特性,用这些新特性给页面确实丰富了不少效果,圆角投影渐变啥的对工作的效率也超级给力,像过去都得用图片来实现的效果现在简单的代码即可轻松实现,让复杂的工作一下变的快捷了许多,并且有些看上去的效果犹如是flash动画做出来的般,看了都让人激发下好奇心马上看看源代码学习下这是怎么实现的,下面也就聊聊用CSS3做的倒影效果。
创新互联主营吴桥网站建设的网络公司,主营网站建设方案,APP应用开发,吴桥h5小程序定制开发搭建,吴桥网站营销推广欢迎吴桥等地区企业咨询先上两张截图:
不晓得大家看出这两个图有啥共同点,没错,这聊的是倒影自然就是标题都有用倒影的效果。(貌似设计师都爱这效果,哪里都爱加这个)。
用常规方法自然是一块图片没说的,现在有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浏览器的用户而言这些都是浮云般的效果,不过随着浏览器的发展,大家都按共同标准来整合自家产品的话,浮云终会有散开的一天。
转自:http://guaiyutou.diandian.com/post/2012-01-08/21208090
分享题目:css3倒影-创新互联
本文链接:http://pwwzsj.com/article/cddogj.html