文章关键字 ‘Multiple backgrounds’

“蝉原则”与CSS3随机多背景随机圆角等效果

2017年02月17日,星期五

在web设计或交互实现的时候,随机效果是非常常见的,比如说我们希望我们动画看上去运行的是更随机,则可以把动画分解为多个维度,例如水平移动,垂直移动以及旋转缩放等,然后不停的循环,然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”,这样最后实现动画效果就显得非常随机以及丰富等。

阅读全文…

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

2016年10月25日,星期二

CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众广泛的网站。

怎么办呢?我的做法往往是这样,IE9+浏览器使用box-shadow阴影,而IE7,IE8浏览器使用border线框。

我们一般采用一些CSS hack技巧,例如使用:root伪类,从功能上满足了我们的开发需求,但提高了我们的CSS权重,很容易增加我们CSS代码的复杂度,那有没有更好的实现呢?

阅读全文…

CSS混合模式mix-blend-mode/background-blend-mode简介

2015年05月29日,星期五

熟悉PS的人都应该知道混合模式,什么叠加、正片叠底、颜色减淡、颜色加深、滤色……之类的。在web上基本上常见的现代web技术都支持混合模式,例如SVG啊,Canvas等。CSS3自然也不在话下,本文就将介绍CSS3中两个与混合模式有关的CSS属性mix-blend-mode和background-blend-mode,一起进来看看眼界吧~~

阅读全文…

小tip:IE不支持CSS3多背景的替代解决方案

2011年05月23日,星期一

IE6-IE8浏览器不支持CSS3多背景(Multiple backgrounds),只使得这个很惹人爱的属性没了用武之地,好在IE浏览器下还是有替代的解决方法的。而本文的内容就是介绍这种替代方法,并展示了比较实际的应用实例。显然,像这种性质文章,demo页面自然少不了,丰富飞截图自然少不了,必要的源代码展示也少不了。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译 – CSS3 Backgrounds相关介绍

2011年05月8日,星期日


就上周吧,出了个关于CSS3 Backgrounds的课件,个人觉得对于学习很有帮助,于是决定翻译下,不过作者似乎将下载功能关闭了,于是不能再原pdf文件上修改,不得已,自己就整了个长长的HTML版本的,也即是本文的主要内容了。本文截图超多,但是没有demo页面,图文并茂,相信能够对您的学习会有所帮助的。

阅读全文…