小tips: IE7,IE8浏览器纯CSS实现正圆角效果

2016年07月6日 by 张 鑫旭 阅读 38543 次, 今日 77 次

CSS3 border-radius可以轻易实现圆还有圆角效果,然而,需要IE9+浏览器才行。移动端自然不成问题,但是众多(尤其面向C侧)PC页面是至少需要兼容IE8的,那有没有什么办法可以让IE7, IE8也支持圆角呢?

很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角。然后,本文再介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子……

阅读全文…

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

2016年07月6日 by 张 鑫旭 阅读 12546 次, 今日 14 次

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

阅读全文…

简单了解HTML5中的Web Notification桌面通知

2016年07月6日 by 张 鑫旭 阅读 52239 次, 今日 153 次

通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。

在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.title的值。

然而,这种提示有个致命的缺陷,就是用户的浏览器要一直是张开的。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息。

不过不要担心,Web Notification就可以很好地解决上面的痛点…

阅读全文…

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

2016年06月8日 by 张 鑫旭 阅读 55875 次, 今日 113 次

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

阅读全文…

基于clip-path的任意元素的碎片拼接动效

2016年06月7日 by 张 鑫旭 阅读 21805 次, 今日 11 次

看电影的时候会有特效,反派被攻击的粉碎,依然可以零零碎碎的拼接成完整体。在网页中,我们可以使用类似的效果,而且使用CSS3就可以,而且可以让任意的元素有这种效果。不信?你点击去看看就知道了~~

阅读全文…

JS一般般的网页重构可以使用Node.js做些什么

2016年06月7日 by 张 鑫旭 阅读 38935 次, 今日 25 次

做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过。

对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.js,且很有可能对Node.js都没有一个比较立体的认识——知道这玩意可以跑服务,构建很多前端工具,看上去很厉害的样子,但是,可能就仅限于此了。

实际上,就算你JS一般般,你也能搞出一些有意思,可以提高自己生产效果的小工具小脚本什么的,本文就将通过示例演示,玩Node.js,只要懂中文,会毛毛雨程度的JS就够了……

阅读全文…

基于用户行为的图片等资源预加载

2016年06月4日 by 张 鑫旭 阅读 23504 次, 今日 29 次

懒加载和本文要提到的预加载实际是不同的概念。

典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载;或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载。

而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现。不足也很明显,那就是资源可能白白加载了。

那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢?

阅读全文…

基于screen.width的伪响应式开发

2016年06月3日 by 张 鑫旭 阅读 16854 次, 今日 10 次

传统的响应式实现往往基于基于media query查询,这是基于CSS的布局控制,因此,当我们缩小浏览器窗口,可以即时看到布局变化。但是,这种实现在我看来,除了让总监大人可以方便体验窄屏效果外,就然并卵了! 而反倒是有可能增加了额外的资源消耗和开发成本。
那有没有什么办法既能满足响应式的需求,同时我们开发这边不要那么烦心呢?
试试使用screen.width来做伪响应式开发……

阅读全文…

canvas图形绘制之星空、噪点与烟雾效果

2016年06月2日 by 张 鑫旭 阅读 30699 次, 今日 51 次

本文的3个效果都是源自我最近做的几个真实的项目,是canvas领域基本入门的一些效果。代码我都专门重新梳理了下,必要注释也都加上去了,方便大家的学习……

阅读全文…

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

2016年05月20日 by 张 鑫旭 阅读 25332 次, 今日 38 次

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

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

阅读全文…