letter-spacing+first-letter实现按钮文字隐藏

2013年07月30日 by 张 鑫旭 阅读 109461 次, 今日 61 次

图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论、微博转发等可见一斑),text-indent负值为最常用方法,然问题有三……

上周分享,有同行提到另外一个隐藏之法,简称为:font: 0/0 a法,然而也有不足……

我午饭后打瞌睡的时候想到了一个方法,一句话概括就是letter-spacing负值+first-letter伪元素负值实现……

阅读全文…

CSS背景色镂空技术实际应用及进阶

2013年07月27日 by 张 鑫旭 阅读 108191 次, 今日 52 次

其实在10年的时候,3年前我就介绍过背景色镂空技术,文章名为:“使用CSS实现Photoshop选区效果及应用”。
实现的就是类似下面的效果。虚框是个gif动画背景,水果图片1像素镂空,于是就有效果啦!

今天我翻墙逛twitter的时候,见到了这种技术更为实际的应用……

阅读全文…

jQuery诞生记-原理与机制

2013年07月17日 by 张 鑫旭 阅读 214442 次, 今日 57 次

网上也有其他一些介绍jQuery原理或机制的文章,可能当事人自己理解,而阅读者本来就不懂,说来说去,越说越绕,可能更不懂了。

jQuery是很优秀,好比身为灵长类的人类。但是,其诞生显然是从简单开始的。因此,要了解人类,可以通过追溯其起源。如果你是上帝,要让你造一个人,你会怎么造,是一口气出来?女娲造人还要捏泥人呢!不妨从单细胞生物开始,随着自然进化,淘汰,自然而然,就会出现人类,上帝他就是这么干的。

jQuery的诞生也大致如此,要想了解jQuery,可以试试踏着本文jQuery的成长足迹,一点一点逐步深入,您就会了解为何jQuery要这么设计,它是如何设计的等。

虽然,内容由浅及深,但是,其中涉及的原型以及new构造函数的一些特性,对于新人而言,还是有一些理解门槛的,希望我的描述与解释可以让你有一丝豁然开朗,那就再好不过了。

阅读全文…

小tip: mobile/pad自定义滚动超小插件simpScroller

2013年07月17日 by 张 鑫旭 阅读 87821 次, 今日 31 次

针对移动设备的自定义滚动条插件有不少,例如iscroll, 或者appframeword(原名jqmobi)的af.scroller.js方法。

前者34K,后者呢,我勒个去,63K! 没错,63K!一个滚动插件63K, 而且是在移动设备上使用的,移动联通立即表示压力很大!

人家…人家..只是个小项目,就指头多个web app页面,你…你..突然露出一身肌肉,人家怕怕……

阅读全文…

HTML5 DOM元素类名相关操作API classList简介

2013年07月15日 by 张 鑫旭 阅读 184551 次, 今日 49 次

如果我们把元素的类名操作比作“切水果”游戏的话,其中一个单独的类名就好比“水果”或“炸弹”!
DOM Level 2时代,类名的获取与设置,多半使用className属性,className的生效近似切水果的“一刀切”。在web的初期,交互什么的其实很简单的来;就像切水果刚开始的时候,一次就一个水果飞上来,一刀“咔嚓”切了就好,就像使用className赋个类名值,就算偶尔冒出2个水果,className也可以一刀切搞定的。
但是,随着web的发展,交互的逐渐复杂……

阅读全文…

first-line伪类实现兼容IE6/IE7的单标签多背景效果

2013年07月5日 by 张 鑫旭 阅读 61341 次, 今日 17 次

background+filter滤镜可以实现低版本IE浏览器下的多背景效果,::first-line伪元素也是可以实现的,本文就将介绍这种技巧。有表格数据、有源代码展示,有demo页面,有效果截图,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译-Mobile手机web开发问题们以及如何避免

2013年07月1日 by 张 鑫旭 阅读 82532 次, 今日 72 次

本文是brad_frost2年手机web开发遇到的常见问题总结。还好,这次翻译不坑,还是有点干货的。文中有很多拓展阅读的链接,还是相当有价值的。对文本,自己打个78分吧,看看会有些收获的。

阅读全文…

ajax与HTML5 history pushState/replaceState实例

2013年06月19日 by 张 鑫旭 阅读 326531 次, 今日 58 次

众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。

阅读全文…

小tip: CSS3 animation渐进实现点点点等待提示效果

2013年06月9日 by 张 鑫旭 阅读 137450 次, 今日 29 次

一个名叫“阿贾克斯”的屌丝男在名为“客户端”的学校上学,为了追女神,下狠心,借了高利贷给女神买Mac. 结果,期限已到,要债的找上门,没办法,只能向身在“服务器端”的父母要钱。但是,要钱是要一定的过程和时间的。他必须想办法向要债的表明,钱正在过来的过程中,否则,可能要债的会认为你在忽悠,直接使大招——”Ctrl+W”,瞬间灭了你,眼不见心不烦。
如果告知钱正在过来的过程中呢?
有人可能如下处理,弄个转转转的小图片告诉要债的,看,我在原地不停地转……

阅读全文…

伪元素表单控件默认样式重置与自定义大全

2013年06月7日 by 张 鑫旭 阅读 199975 次, 今日 289 次

所有的form表单元素都有或多或少的伪元素可以重置其浏览器内置的UI样式,我光demo就有17个之多,截图30+之多,本文虽参考之作,自己条条亲自验证设置。虽目前价值并未凸显,但是,过段时间,可能就是宝了。

阅读全文…