2013年11月21日 by 张 鑫旭 阅读 319866 次, 今日 3 次
前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之,国外也有之……
虽然本文标题也有“毛玻璃”二字,sorry,是“三字”。但是,并不是介绍如何实现毛玻璃效果的,而是介绍毛玻璃效果实现的基础——模糊。哈哈,恕我取巧,借用“毛玻璃”之词,沾沾喜气,散发芳气;蜂飞蝶舞,围观博主。
本文很单纯,就是图片模糊效果的实现。demo、源代码、截图、拓展以及御用模特应有尽有,希望本文的内容能够对您的学习有所帮助!
阅读全文…
标签: blur, canvas, filter, getImageData, SVG, 图片, 模糊, 滤镜, 高斯模糊
发布在 CSS相关, SVG相关 | 28 条评论 »
2013年11月19日 by 张 鑫旭 阅读 253726 次, 今日 2 次
如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了,或借助margin
负值,或借助CSS3 transform
的translate
属性;这里介绍另外一个方法,margin:auto
方法……
外甥点灯笼——照旧(舅),有demo有截图有源代码展示。希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: margin:auto, margin负值, translate, 垂直居中, 弹框, 绝对定位
发布在 CSS相关 | 56 条评论 »
2013年11月13日 by 张 鑫旭 阅读 73373 次, 今日 5 次
我记得有个版本的迅雷软件,会发现focus文本框时候,其外发光的外挂会跟着动画移动。据说这一系列N动画交互引擎的维护成本还是挺高的。
今天,偶然看到一个名叫Nikita Vasilyev的兄弟在web页面上折腾了个类似效果。其是JS实现的,我习惯性就想,可不可以CSS实现呢,一番折腾,发现,竟然……
阅读全文…
标签: css3, focus, outline, pointer-events, transition
发布在 CSS相关 | 18 条评论 »
2013年11月10日 by 张 鑫旭 阅读 218200 次, 今日 6 次

2013年下半年,鄙人的代码作品之一,名曰“jQuery万能切换插件”。顾名思意,使用了此插件,web页面上的各种切换效果你都可以轻松实现。兼容IE6+,API简洁、设计巧妙。性能优异,使用简单。可谓网页开发制作必备佳品啊!
阅读全文…
标签: jQuery, powerFloat, powerSwitch, 动态api, 匿名api, 图片切换效果, 手风琴效果, 插件, 跑马灯效果, 选项卡
发布在 jQuery相关 | 85 条评论 »
2013年11月5日 by 张 鑫旭 阅读 259005 次, 今日 1 次

目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端或Swf控件,也就是,这些带续传功能的上传都不是使用HTTP协议实现的,也就是不是传统的网页技术(HTML+CSS+JS)实现的。
然,times are changing, 事物发展,时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。
Ajax 2.0中最大的变化之一就是对二进制数据的支持,而且提供了一个可以直接处理二进制数据的方法——slice方法。
该方法为断点续传提供了有力的技术支持。
阅读全文…
标签: Ajax, Blob, File, HTTP协议, XMLHttpRequest, 上传, 文件上传, 断点续传
发布在 JS实例 | 63 条评论 »
2013年10月14日 by 张 鑫旭 阅读 219023 次, 今日 1 次
我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位、职位兴起以及工作分工等。抛开IE6浏览器不谈,其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的。 然后,好多年过去了,XMLHttpRequest带着两位家臣,DOMString和Document数据类型攻城略地,几乎一统天下。 然时代是发展的,人们群众的需求是旺盛的,HTML5犹如冉冉升起的新星开始普照大地,恩泽大众。XMLHttpRequest由于就两个家臣DOMString和Document,且并不是100%听话。因此,其已经开始hold不住HTML5的耀眼光芒了。为了顺应时代的潮流,XMLHttpRequest凹凸曼变身升级到2.0,变化诸多,其中一个很重要的变化就是广招家臣,扩张实力,与HTML5一起完成千秋万载之大业。 这些家臣有……
阅读全文…
标签: ArrayBuffer, Blob, Document, DOMString, File, FormData, XMLHttpRequest
发布在 JS相关 | 45 条评论 »
2013年09月30日 by 张 鑫旭 阅读 437496 次, 今日 3 次

本文可谓JS实现动画必读文章。设计实现、性能、动画算法,CSS3相关等一系列内容。配以生动的对话体,二次元与三次元的碰撞;丰富的demo、截图以及源代码展示,平白易懂的文字,相信本文的内容一定能够对您的学习有所帮助!
阅读全文…
标签: animate, requestAnimationFrame, 动画, 弹性缓动, 径向渐变, 性能, 缓动
发布在 Web综合 | 113 条评论 »
2013年09月22日 by 张 鑫旭 阅读 164994 次
对SVG有所关注的同行应该都知道,IE8-以及Android 2.3默认浏览器是不支持SVG的,实际项目,这些浏览器,至少IE8浏览器还没有到不管不问的时候,因此,在使用视网膜显示友好的SVG同时,我们还要做一点优雅降级,使IE8等考古价值浏览器也能手染余香。
本文在介绍一种新的SVG降级技术的同时,同时把以前css-tricks中提到的技术又总结了一遍。大集合什么的我做喜欢了,以后不要找来找去,因此,这里,我按照个人的理解,配合自己的一些实际测试,分享下。
demo, 截图、表格、源代码什么的应有尽有,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: Modernizr, png, SVG, 优雅降级, 渐进增强
发布在 SVG相关 | 29 条评论 »
2013年09月16日 by 张 鑫旭 阅读 57202 次
CSS选择器可以用来实现搜索功能。
以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,居然可以用来过滤和搜索页面元素。有兴趣就进来看看吧,可能会有启发哦!
阅读全文…
标签: :not, 属性选择器, 搜索, 选择器
发布在 CSS相关 | 9 条评论 »
2013年09月9日 by 张 鑫旭 阅读 107951 次
emmet前身是zen coding. 我是通过接触sublime Text而认识的。
据说,emmet支持各种编辑器,神器Notepad++支持, 神器他哥Sublime Text支持,坦克Eclipse也支持,哟,甚至Dreamweaver也支持!
虽众仙喜欢神器,我却依旧Dreamweaver粉。因此,我就讲讲如何在Dreamweaver中使用emmet.
多多截图,简单易懂,可以错过哦~
阅读全文…
标签: dreamweaver, emmet, 快捷键, 插件, 空格
发布在 CSS相关 | 31 条评论 »