CSS渐变图片背景下高度亦自适应按钮

2010年06月21日 by 张 鑫旭 阅读 117926 次, 今日 8 次


本文将介绍一种效果精湛,兼容性强,扩展性强,易上手易理解的按钮实现方案,此按钮与以往介绍的按钮一样,也是高宽自适应,可与图片混排,受控于text-align属性。但是这里的代码更加精简易懂,更符合主流与开发者的习惯。
本文提供必要的截图,提供Demo页面,以及代码展示,并对代码做了一定的讲解,希望能对您的学习有所帮助。

阅读全文…

页面可用性之浏览器默认字体与CSS中文字体

2010年06月19日 by 张 鑫旭 阅读 157005 次, 今日 6 次

本文主要阐述我们绝大多数开发人员可能会忽略的不知道的一个用户体验与页面可用性的一个问题,截图丰富,没有Demo,下面为文章内容摘要,相信会对您的进步提供一点帮助的。

我们可能仅仅是忽略而已,仅仅是不知道而已!对于中文网站,我们的用户绝大多数是中文用户,在页面上设置中文字体属性(宋体/simsun)会降低页面的可用性和潜在的用户体验。如今的web,好的产品往往是可以满足用户的个性需求和自主能动性。页面上中文字体的设置会扼杀浏览器的默认中文字体,无法让用户以自己喜欢的中文字体显示。所以,我个人的倾向是,不要再CSS中,至少在body/html这类标签上设置中文字体。

我本想把本文的题目定为“不要再CSS中定义中文字体”,这样的题目更有噱头,但是……(我要转折)。因为我突然想到,有些网站就是不让你使用您自己定义的字体,比如网站可能会使用“微软雅黑”与“宋体”来区分中文与标题,如果网站中文字体可以提过浏览器自定义,例如“微软雅黑”,则标题与正文字体一致,反而增加了阅读浏览负担,降低了用户体验。

所以,到底哪种做法更好,要看实际的情况,合适的往往是最好的。但是,您需要知道:在CSS中设置中文字体会让中文用户无法通过修改浏览器默认字体来按照自己的需要浏览网页。至于具体您会怎么做,那就看您自己了……

阅读全文…

文本框邮箱地址自动提示jQuery插件

2010年06月18日 by 张 鑫旭 阅读 160963 次, 今日 2 次

本文主要展示我今天差不多花了一天时间写的邮箱地址自动提示的插件,算是蛮实用的东西,插件不大,为压缩不足6K。跟以往一样,提供详尽的插图,提供demo页面,提供源文件下载以及代码示例。总之,希望能对您的学习有所帮助。

阅读全文…

CSS vertical-align的深入理解(二)之text-top篇

2010年06月12日 by 张 鑫旭 阅读 160316 次, 今日 22 次

vertical-align属性可以说是CSS中兼容性最糟糕的属性之一了。比如说与文字相关的vertical-align属性,vertical- align:text-top;和vertical-align:text-bottom属性,这两个属性的解释IE浏览器(IE6-8)和现代浏览器是不一样的两个派别。到底哪种表现是正确的,这是不能随便做定论的。无论实现的机制如何,若能实现类似的效果表现,其实都可以说是正确的。在一般的使用条件下,例如小图标+文字,vertical-align:text-top这类文字对齐类属性在不同浏览器下的差异是较小的,这很难让我们去思考与理解这些差异在什么地方。但是,如果我们将测试的元素进行简化与放大,那么差异显而易见,也更利于我们思考其中的原因所在……
本文是我对CSS vertical-align属性深入思考后的一些心得体会,提供丰富飞截图,动画演示,以及必要的demo。希望讲的足够通俗易懂,能对您的学习有所帮助!

阅读全文…

文本框/域文字提示自动显示隐藏jQuery小插件

2010年06月7日 by 张 鑫旭 阅读 92732 次, 今日 1 次

虽然这个插件很小,雕虫小技,不值一提,微不足道,黔驴技穷,甚至称不上插件,但是毕竟有时候还是很实用的,所以呢,就放出来了,让大伙儿瞧瞧。

本文内容简单,主要就是提供demo展示,一些文件的下载,一些使用的简单说明,还有就是有着浓郁的本人语言风味的废话,总之,希望能对您的学习有所帮助。

阅读全文…

代码精简 – 常见JavaScript代码缩写举例

2010年05月31日 by 张 鑫旭 阅读 39841 次, 今日 3 次

本文内容非常简单,就是展示了JavaScript中一些常见的可以缩写的实例举例,没有demo,没有截图,仅仅是一些代码展示,对于初学者而言是有一定的帮助的。

阅读全文…

使用CSS3绘制我们的太阳系

2010年05月31日 by 张 鑫旭 阅读 60979 次, 今日 2 次

本文内容展示多于技术的介绍,主要展示的是用CSS3实现的炫酷的太阳系效果,Firefox浏览器下静态页面,Chrome以及Safari浏览器下有环绕的运动效果,本文提供截图以及视频展示,提供核心的CSS代码以及demo页面,希望你对您的学习有所帮助。

阅读全文…

RGBA颜色与兼容性的半透明背景色

2010年05月29日 by 张 鑫旭 阅读 223275 次, 今日 7 次

本文最最重要的内容其实不是讲rgba,而是介绍如何在IE下也能实现半透明的背景效果。RGBA实现半透明背景很简单,直接一个半透明参数就可以了,但是IE浏览器下,就目前而言,需要使用滤镜,这个滤镜不是半透明滤镜,而是渐变滤镜,IE渐变滤镜支持半透明渐变背景色。

本文就将展示如何实现兼容性飞半透明背景效果,并列举一些实际应用。本文虽然截图不是很丰富,但是必要的都提供了,提供必要的代码展示与demo页面,希望能对您有所帮助。

阅读全文…

翻译 – 从心理学角度看UX设计

2010年05月28日 by 张 鑫旭 阅读 56103 次, 今日 3 次

本文是一篇非常不错的关于用户体验设计的文章,本文作者是一个心理学家,他从他所研究的领域去看到用户行为,用户体验,相信会给你带来不一样的观念与知识。
纯粹的文字翻译,没有插图,没有demo。
翻译水平有限,若有不准确之处欢迎指正。

阅读全文…

实现兼容性的CSS粗虚线边框(dashed)效果

2010年05月24日 by 张 鑫旭 阅读 137633 次, 今日 8 次

CSS border-style属性中,有一个非常常用的属性,就是dashed,用来形成虚框。平时我们使用的宽度多半是1像素,所以其中的差异不细究,也不易觉察。但是,如果边框的宽度(border-width)大于1像素,那么不同浏览器下的表现差异就比较明显了。

如何让各个浏览器下的边框表现一致呢?这就是本文要为你讲解的。提供丰富飞截图,代码展示,提供必要的示例demo,希望能对您的学习有所帮助。

阅读全文…