小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现

2015年02月15日 by 张 鑫旭 阅读 37805 次, 今日 3 次

IE的Matrix矩阵变换,或者zoom缩放会改变元素原本占据的展示尺寸,位置等,与CSS3优雅的transform完全不一样,导致,我们需要对IE做额外的偏移。

但是,我们大多数人的数学都是体育老师交的,计算偏移值什么的,想想就大头娘娘了,难道,就不能跟CSS3 transform一样,就规规矩矩居中放大吗?

童鞋,略施小计,还是有办法滴……

阅读全文…

CSS深入理解流体特性和BFC特性下多栏自适应布局

2015年02月12日 by 张 鑫旭 阅读 205785 次, 今日 13 次


好久没写纯粹CSS相关知识的文章了,所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统,立足基础,深入理解。希望可以帮助相关从业者有所成长。如题,本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局,demo、截图以及源代码一个都不少,耐心看完,相信会有一番收获的。

阅读全文…

图片动态局部毛玻璃模糊效果的实现

2015年02月5日 by 张 鑫旭 阅读 120481 次, 今日 6 次

本文内容如题,图片动态局部毛玻璃模糊效果的实现,有图有文有码有实战,更有尔康亲临助阵,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tips: 使用 等空格实现最小成本中文对齐

2015年01月27日 by 张 鑫旭 阅读 125527 次, 今日 19 次

有些空格很特殊,其宽度正好跟中文字符宽度有个特定的比例关系,于是,我们再实现一些布局的时候,就有了更轻松的方法……

本文推陈出新,同样,有截图,有demo, 有源代码展示,总之,希望本文的内容能够对你的学习有所帮助。

阅读全文…

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

2015年01月25日 by 张 鑫旭 阅读 210672 次, 今日 9 次

当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏,然而,这种布局有一个存在一个影响用户体验的隐患。应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条;超出,出现滚动条。于是,问题来了,当内容加载从不足1屏到超过1屏,页面就会跳动!有没有什么好办法呢?本文就将介绍一个简单实用的技能tips, follow me…

阅读全文…

内容loading加载后高度变化CSS3 transition体验优化

2015年01月22日 by 张 鑫旭 阅读 81718 次, 今日 4 次

现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。

确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。

所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。

而本文就将分享,我是如何渐进处理,让动画过渡呈现更自然的…… 必须的,demo,截图,源代码展示一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

Chrome absolute绝对定位display/visibility渲染bug

2015年01月10日 by 张 鑫旭 阅读 57264 次, 今日 2 次

一般我们对Chrome浏览器的评价是:Chrome好棒!Chrome好潮!Chrome就是多来A梦,要什么有什么!但是,再好的奶茶也会有过期的时候。很多次遇到,Chrome下的渲染表现是最糟糕的那个。比方说本文要介绍的两个bug就是Chrome浏览器下特有的,到底是什么bug呢?点击去瞅瞅就知道啦!

当然,除了bug展示,也提供了解决方案。有demo,有截图,有必要的源代码展示,总之希望本文的内容能够对您的学习有所帮助。

阅读全文…

再说CSS3 animation实现点点点loading动画

2014年12月28日 by 张 鑫旭 阅读 91640 次, 今日 4 次

以前介绍过一种方法实现打点loading动画效果,但是那个方法不健壮,机缘巧合,让我重新思考有没有更好的方法。而本文分享的就是自己想到了2个全新的实现方法,兼容各大小浏览器。

本文不仅有demo,源代码展示,还特意制作了多种gif效果演示帮助理解,相信本文的内容会对你的工作有所帮助的!

阅读全文…

CSS3 cursor属性值zoom-in/zoom-out,grab/grabbing实例

2014年12月22日 by 张 鑫旭 阅读 54272 次, 今日 4 次

CSS3的领域范围已经渗透到了cursor属性(鼠标手形)。这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing.

本文重在展示,开阔眼界,一如既往,有demo,有截图,有必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3/SVG clip-path路径剪裁遮罩属性简介

2014年12月22日 by 张 鑫旭 阅读 101860 次, 今日 5 次

CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属性家族!

所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性,可以游走于SVG属性和CSS属性之前。本文中等篇幅,中等难度,丰富的源代码展示,丰富的demo页面,丰富的截图,还有必要的gif演示,总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…