文章关键字 ‘css相关’

搜狐白社会似iphone短信对话框效果的优化

2009年09月10日,星期四

搜狐有个白社会,今年六七月份露出水面的。其首页css我是从头到尾看了一遍,学了些东西,也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框,有些形似iphone里面的可爱的短信对话框。

这个对话框效果是不错的,能支持高度上限500像素的文字内容,宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后,发现要实现这样的效果,这代码,至少是这图片肯定是优化不够的。而本文将对比其原来的方法,提供更加大小优化的图片和对应的没有兼容性问题的css代码,看如何将css发挥到机制实现图片背景的优化。

文章主体将简要展示对原图片做如何的处理,展示在各个浏览器下的兼容性表现,以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助!

阅读全文…

jQuery之图片关联伸缩效果

2009年08月31日,星期一

这里要介绍的这个效果又称为手风琴效果。用css就可以实现类似的效果,但是使用css只是单纯地将宽度变大和缩小,而使用jQuery可以实现流畅的动画效果,体验会更加不错的!而实现的关键就是animate这个很神奇很伟大很实用的动画函数。
主要的不是讲解animate这个函数,我jQuery,js研究不深,讲了只会被人笑。所以这里只是展示下效果而已,希望能对您有所帮助!

阅读全文…

jQuery-单击文字或图片内容放大显示效果插件

2009年08月30日,星期日

css很强大,jQuery也很强大,两者结合在一起就是无比强大。
这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物。
支持文字,图片,flash动画,视频,复杂div的居中放大显示,而且含有自适应内容大小的圆角投影效果。
本文提供简单的使用讲解,实例页面,以及文件的打包下载,希望对您有所帮助。

阅读全文…

jQuery-很酷的弹出层效果js插件

2009年08月30日,星期日

告别生硬的系统自带的弹出提示效果,享受前端技术带来的炫酷的视觉效果和舒适的交互体验。这里向您推荐一款不错的弹出层插件,可以放置文字,图片,flash以及复杂的div层,支持定时弹出层消失,用做提示再好不过了。您不妨也来体验一下。

阅读全文…

复选框单选框与文字对齐问题的研究与解决

2009年08月27日,星期四

目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性,控件本身的特殊性以及代码成本的控制等,使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了,因为平时对这个问题注意的比较多,也经常做些测试,对这个问题还是有一定的了解,也总结了不少自己的解决方法。今天我就写下来,供交流与参考。
尤其是第三和第五个方法,我是比较推荐使用的,其他方法也是很不错的,对于理解css,拓宽思路还是有些帮助的。

阅读全文…

IE6下png背景不透明问题的综合拓展

2009年08月22日,星期六

IE6不支持png背景透明或半透明。其解决方法有IE滤镜,纯粹的JavaScript,以及jQuery等,正所谓事非经过不知难,让png图片在IE6下背景透明显示只是第一步,如果对这些png图片做进一步的操作,往往会出现各类莫名的问题,例如无法响应单击事件,图片大小控制失效,无法实现background-position的定位等。本篇文章讲详尽阐述png背景透明会出现这些问题的原因,以及对每一个问题提供相应的解决方法,每个对应的方法提供相应的demo实例页面。在问题的探讨过程中会尽可能的分享我的一些经验。文章内容较多,涉及css, javascript, jQuery, flash, ActionScript, flash通信, photoshop图片处理等,有一定的深度和广度,希望对大家有帮助。

阅读全文…