深入理解CSS3 gradient斜向线性渐变

2013年09月6日 by 张 鑫旭 阅读 72503 次, 今日 103 次

CSS3斜向渐变,看上去好像挺简单。实际上,其远没有你想得那么简单。本文就将逐步揭开其一些复杂、特意的地方。避免您在日后的使用中掉进坑里。
很多自己制作演示图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

贝塞尔曲线与CSS3动画、SVG和canvas的基情

2013年08月30日 by 张 鑫旭 阅读 117794 次, 今日 145 次

CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……

阅读全文…

URL锚点HTML定位技术机制、应用与问题

2013年08月25日 by 张 鑫旭 阅读 136461 次, 今日 76 次

点击查看本文
关于锚点,我3年前就写过一篇针对性文章:“关于锚点跳转及jQuery下相关操作与插件”,不过内容略浮躁,都是偏表象、偏基本应用层面的东西;这里还是关于锚点,探讨的内容可能更深层次一点。

当下,锚点定位的应用一般有:href="#"返回顶部;或者文章较长时候的标题索引。这类应用往往都是通过点击触发的,于是,难免的,我们可能就很简单地认为锚点定位的触发是通过点击事件。而实际上,这种顺势而然的理解类似于古人理解为太阳绕着地球转一样,是有失偏颇的。我个人认为,锚点的定位是通过……

未来高端流行技术之一:锚点技术。

长篇,内容丰富,干货较多,希望本文内容能够对您的学习有所帮助!

阅读全文…

折腾:2颗星星+纯CSS实现星星评分交互效果

2013年08月7日 by 张 鑫旭 阅读 68744 次, 今日 58 次

发表评论的时候,我们经常会遇到点击星星做评分的交互。大部分情况下,大家使用的是5个一排5个一排的大块星星背景图实现的。实际上,两颗星星就可以搞定。本文就将展示这个。同时,有人觉得,实际需求还需要记住你选中的星星,CSS搞不定。实际上,这是可以使用CSS实现的。如何实现呢?就是本文要介绍的内容。

本文多技术展示,为便于理解,自制了不少原理示意图,以及必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2013年07月30日 by 张 鑫旭 阅读 52331 次, 今日 12 次

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

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

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

阅读全文…

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

2013年07月27日 by 张 鑫旭 阅读 42884 次, 今日 11 次

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

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

阅读全文…

jQuery诞生记-原理与机制

2013年07月17日 by 张 鑫旭 阅读 127537 次, 今日 39 次

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

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

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

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

阅读全文…

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

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

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

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

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

阅读全文…

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

2013年07月15日 by 张 鑫旭 阅读 110066 次, 今日 72 次

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

阅读全文…

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

2013年07月5日 by 张 鑫旭 阅读 24155 次, 今日 7 次

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

阅读全文…