新浪微博插入话题后部分文字选中的js实现

2010年04月14日 by 张 鑫旭 阅读 91379 次, 今日 1 次


在新浪微博的微博信息发布框下面,有个“话题”按钮,点击这个“话题”文字按钮后,在输入框文本域里面就会添加一段文字“#请在这里输入自定义话题#”,其中“请在这里输入自定义话题”处于被选中的状态,这样用户无需再选中文字,直接敲键盘就可以替换这部分内容,这是非常好的一个提高用户体验的细节。
本文就像详尽的讲解这种效果的实现,提供详尽的代码展示,必要的截图,以及demo示例页面,希望能对您的学习有所帮助。

阅读全文…

JavaScript实现http地址自动检测并添加URL链接

2010年04月14日 by 张 鑫旭 阅读 138396 次, 今日 5 次

给http字符自动添加URL链接是比较常见的一项功能。本文主要讲解如何使用JavaScript实现URL地址自动添加链接的实现。略微展开讲述了JavaScript正则表达式的一些概念。内容虽小,讲解甚细。
本文提供丰富的代码示例,提供详尽的页面截图,以及必要的demo测试页面,希望能对您的学习有所帮助。

阅读全文…

CSS实现兼容性的渐变背景(gradient)效果

2010年04月9日 by 张 鑫旭 阅读 459761 次, 今日 3 次

经过之前对Firefox浏览器渐变背景实现的详细介绍,以及webkit核心浏览器下渐变背景实现的详细介绍,这里可以很游刃有余的介绍如何实现兼容性的渐变背景效果了。本文由一部分内容是介绍如何使用滤镜实现IE下的渐变背景效果,配合CSS3的gradient渐变属性,实现兼容性的渐变背景效果(Opera浏览器除外)。本文提供详细的代码展示,效果截图以及demo页面,希望能对您的学习有所帮助。

阅读全文…

CSS content内容生成技术以及应用

2010年04月9日 by 张 鑫旭 阅读 234129 次, 今日 8 次

本文讲解CSS content属性,这一属性您可能用的不多,关注的也不多,其根本原因就是IE6/IE7的不支持,但是,IE6/IE7的淘汰只是时间问题。实际上,CSS content属性是个非常强大的属性,其应用范围可能要比您之前认为的要广泛的多。本文就将针对这一属性从基本开始详细阐述,并列举一系列有代表性的应用,提供详尽的代码示例,效果截图以及demo页面,希望您对您的学习有所帮助。

阅读全文…

CSS gradient渐变之webkit核心浏览器下的使用

2010年04月8日 by 张 鑫旭 阅读 162685 次, 今日 4 次

渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现,可以用来代替图片URL。在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的。您还可以指定多个中间过渡色,此称之为color stops。
本文足够详尽地讲解了webkit核心浏览器下的gradient渐变的使用,提供代码示例和截图示例,希望能对您的学习有所帮助。

阅读全文…

CSS渐变之CSS3 gradient在Firefox3.6下的使用

2010年04月4日 by 张 鑫旭 阅读 120279 次, 今日 1 次

Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变。
背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以让您创造出一个更灵活的布局。……

阅读全文…

区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack

2010年04月4日 by 张 鑫旭 阅读 119870 次, 今日 1 次


CSS hack这个东东可以说是老掉牙的东西,我是不会再放到锅里炒的。之所以写这篇文章,更主要的是介绍一个CSS hack – “\9″ hack。
本文以介绍”\9” hack为引子说说如果简单有效的区分IE8/IE7/IE6以及其他的现代浏览器,提高详尽的代码展示,提高必要的demo页面以及各个浏览器表现的截图,希望能对您的学习有所帮助。

阅读全文…

CSS实现跨浏览器兼容性的盒阴影效果

2010年04月2日 by 张 鑫旭 阅读 94139 次

在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果:点击这里看图
然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果。
本文提供详尽的代码,必要的demo以及图片效果展示,希望能对您的学习有所帮助。

阅读全文…

CSS3&HTML5各浏览器支持情况一览表

2010年04月2日 by 张 鑫旭 阅读 95781 次, 今日 1 次

正如题目所显示的,本文展示的内容是CSS3&HTML5各浏览器支持情况一览表,方便您的查阅。其他的话语就不多说了,会定时更新,希望能对您的学习有所帮助。

阅读全文…

翻译 – CSS Sprites:实用技术还是生厌之物?

2010年03月30日 by 张 鑫旭 阅读 67292 次, 今日 1 次


这是一篇翻译的文章,翻译的原因在于,我与原作者有类似的观点,即我自己也觉得CSS sprites的使用到了重新审视的时候。不过老实讲,本文作者在观点的表达以及论证上多少有些牵强,但是实际上,CSS sprites确实是需要善用的。难得的,本文没有demo,没有源文件。只是希望能够对您有一些新的启示。

阅读全文…