文章关键字 ‘css3’

真正了解CSS3背景下的@font face规则

2017年03月30日,星期四

很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下……

阅读全文…

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

2017年02月17日,星期五

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

阅读全文…

基于CSS3 column多栏布局实现水平滑页翻页交互

2017年02月15日,星期三

column多栏布局和flex弹性布局基本上是同一时间段出现的,从兼容性来讲,column多栏布局一直以来更稳定更兼容,而flex弹性布局前前后后历经多个版本,直至现在有些移动设备支持依然不好,但是两者的命运却截然相反,column多栏布局鲜有人问津,而flex弹性布局则风生水起。面试的时候,就算面试者并未在实际项目中使用过flex弹性布局,也会时不时扯到这东西上来,好像不提flex布局就跟时代脱节一样,其实完全没有必要,每个CSS属性都有它的潜力和价值所在,挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。

而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果,这里特异分享给大家,希望能够对大家的学习有所帮助~

阅读全文…

小tips:了解CSS/CSS3原生变量var

2016年11月26日,星期六

在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。

本文几乎就是业界关于CSS3 var()变量首发的文章,希望里面的内容能够对您的工作和学习有所帮助~~

阅读全文…

CSS3 appearance大全鉴赏以及是否影响box-sizing

2016年07月6日,星期三

CSS3 appearance可以重置和改变元素的外观,有时候还是挺有用的,目前的兼容性也令人满意,大家不妨可以简单了解下……

阅读全文…

PNG格式小图标的CSS任意颜色赋色技术

2016年06月8日,星期三

CSS可以修改图片的颜色,没错,可以,本文就带你一睹真相,再次领略CSS的潜力和造诣。

阅读全文…

理解CSS3 max/min-content及fit-content等width值

2016年05月20日,星期五

在CSS3的世界里,width属性又多了几个关键字成员,fill-available, max-content, min-content, 以及fit-content。

本文就将分析与介绍这几个关键字,顺便帮忙理一下CSS世界中的尺寸概念,相信本文的内容不仅对于CSS3的学习,包括对CSS2.1整个尺寸的认知都会有一定的帮助。

阅读全文…

使用CSS3 will-change提高页面滚动、动画等渲染性能

2015年11月4日,星期三

CSS3 will-change属于web标准属性,虽然目前还是草案阶段,但出现已经有些时日了,兼容性这块Chrome/FireFox/Opera都是支持的。

这个属性作用很单纯,就是“增强页面渲染性能”。那它是如何增强的呢?

本文都过一个实例抛出will-change这个概念,继而解释其作用,分析其语法,提示使用注意事项等。

希望本文的内容能够对大家的学习有所帮助。

阅读全文…

小tips: zoom和transform:scale的区别

2015年11月3日,星期二

本文内容如题,从表层和深层好好对比了 zoom和transform:scale的区别,有截图,有demo,希望本文的内容能够对您的学习有所帮助。

阅读全文…

秋月何时了,CSS3 border-radius知多少?

2015年11月1日,星期日

深入理解CSS3 border-radius的一些特性表现。平时使用的那点东西只是浮于表面的,实际上,border-radius支持的属性值呢,还是有点料的,也有很多需要注意的tips. 本文就算是border-radius进阶学习,还是一如既往的,有丰富的截图,表情图,琐碎图,插科打诨图;有丰富的源代码展示,对了,还有纯手动打算的便于学习的demo。希望本文的内容能够对您的学习有所帮助。

阅读全文…