现代 CSS

会员专栏

码农的自留地

2015年已悄然离去,已成为昨天。回忆昨天,我有过2012年的《我和W3cplus的故事》,悄悄《走过的2013年》,随着《辞旧迎新,更上一层》,迎来了2015,可是时间的流逝,不知道不觉得就踏入了2016年。也走过了码农传说中的宿命节点35岁。这也是我为何将这篇总结命题为码农的自留地,希望自己能一直拥有这块自留地,一直耕耘下去。

Web动画

动画在Web上的运用到目前为止已不是新课题。大家常常能看到的Web动画有CSS动画、JavaScript动画、SVG动画和HTML5的Canvas动画。最近开始也有不少同学开始在探讨WebGL动画。随着年关将近,今天决定将Web上使用到的一些动画做一个资源整合(主要是为后期的工作做一些储备,因为未来的一段时间的工作主要会和动画交互关联在一起)。在这个集合中主要涵盖了动画的库、框架、教程和性能等。

使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松。

Web重构之道

Web重构之道是今年十月份参加上海Qcon全球软件开发大会新时代的前端专题的一次分享的主题。这次有幸能跟@达峰@sofish@桂川等大神一起同台分享,感到非常的荣幸,也感到无比的压力。还好分享已结束,借此机会重新回忆这次大会上自己分享的主题。在此之前我首先要感谢@贺佬给我上台分享的机会,感谢@winter大大的推荐、建议与鼓励。最后感谢Qcon提供这样的分享平台。

OOCSS: Media & Flag Object

这一切都始于媒体对象(Media Object)。其实就是Nicole写的一个CSS代码片段,这个代码片段是常用来阐述OOCSS的最佳示例。这篇文章能让你对媒体对象更佳的熟悉与了解,如果对媒体对象一点都不了解,建议你先点击这里了解一二

高级CSS filters

在iOS系统上常常能看到高斯模糊(Gaussian Blur)效果,而这种效果早期使用CSS来实现是较为痛苦的一件事情。其实,早上2011年,浏览器就开始对CSS filters规范有所支持。也就是说在2011年浏览器就可以实现Filters效果。但这种效果基本上都只运用在SVG上(只有SVG支持Filter效果),而且只有Firefox浏览器支持,并且只能运用在HTML上。这也造就CSS要实现Filters效果是非常蛋疼的一件事情。

写给前端面试者

不管是刚毕业踏入社会的还是在职场久经奋战的,都经历过被面这一环节。当然也有很多同学开始在面人,为自己的团队选择优秀的血液。而我也是属于这一类,这些年都有在帮公司或朋友的团队物色人才和面试同学。今年在手淘也一样,在给同学面试过程中,让我开始在思考,而且思考了很久,所以这几天静下来写了这篇文章,希望这篇文章对于刚毕业的大学生或者还在继续参加工作面试的同学有所帮助。在这篇文章中,将不涉及任何的面试题,我只想和大家聊聊面试者与被面者之间的感受。

CSS中的数量查询

CSS的数量查询是一个先进的概念,对于新手来说可能有点难或者蛋疼。然而,当我们理解清楚了CSS3的伪类选择器,并且能运用自如,那么理解文章介绍的数量查询并不是复杂的事情。而且这样的工具将会越来越多,比如CSS的预处理器和后处理器都具备了这方面的功能。有了CSS的数量查询这个新概念和功能,我们在页面中就可以根据数量来选择到匹配的元素。如果你感兴趣,不仿自己跟着这篇文章尝试一下。你会有更深入的体会。

Web中的图标

随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>。除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧图)Icon Font(字体图标)SVG Icon等等。今天我们就来一起探讨一下这些方法在Web中实现Icon的利弊。

前端路上的旅行

从步入社会算起到今天,风风雨雨走过了15个年头,望着天空,掐指一算,从事前端已近五个年头。也算三分之一的时间在做前端,也是从事过时间最久的一份工作。问我为什么能做这么久?其实我也时常问自己,怎么就进前端这个行当,怎么就整了五年。正如网上所言,一入前端深似海。玩了五年,或许后面还会有一个五年,两个五年,或许...... 未来的路,谁与说不清楚,我只想每天走好自己想走的路。

页面

返回顶部